CSS Inline, Inline-block, block에 대하여

백광현·2022년 5월 24일
0

Inline, Inline-block, Block은 display 속성으로

display : inline,inline-block,block

으로 사용이 가능하다.

1. inline

inline 속성의 elements의 경우 span, a, em 등 이 있으며 p태그와 같이 줄바꿈이 일어나지 않습니다. 주의할 점으로는 inline으로 지정될 경우 width와 height이 적용되지 않으며 margin과 padding도 좌우만 적용될 뿐 위 아래는 반영되지 않습니다.

2.inline-block

inline-block의 elements로는 button, input, select등 이 있으며 이들은 inline과 동일하게 줄바꿈이 일어나지 않아 나란히 브라우저에 배치됩니다.

inline속성과의 차이점은 width와 Height, margin과 padding의 간격이 모두 반영됩니다.

3. block

block의 elements로는 div, p, h1, h2 등이 있으며 이들은 모두 줄바꿈이 적용되며 다른 elements들을 다음 줄로 밀어냅니다.

0개의 댓글