Display : inline, block, inline-block

이름·2021년 11월 30일
0

CSS에서 Display 속성이 어떤 값을 갖는지에 따라 화면 배치가 결정됩니다.

Display 속성은 아래와 같습니다.

  1. inline

Display 속성이 inline으로 지정된 요소는 줄바꿈 없이 한 줄 위에 다른 요소들과 나란히 배치됩니다. < span >, < a > 등의 태그가 이에 해당합니다.

Inline으로 지정된 경우, css에서 width와 height속성을 지정해도 무시됩니다. 대신 태그를 달고 있는 컨텐츠의 크기만큼 공간을 차지하게 됩니다. 마찬가지로 padding이나 margin과 같은 속성의 상하 값도 무시됩니다.(좌우 값은 반영됩니다)

  1. block

Display 속성이 block으로 지정된 경우, 전후 줄바꿈이 일어나 혼자서 온전히 한 줄을 차지합니다. < div >, < p > 등의 태그가 이에 해당합니다.
inline 요소와는 달리 width, height, margin, padding 속성이 모두 온전히 반영됩니다.

  1. inline-block

inline 속성값과 block 속성값의 중간맛으로, 인라인처럼 전후 줄바꿈 없이 한 줄 위에 다른 엘리먼트들과 나란히 정렬됩니다.
하지만 width, height, margin, padding속성을 온전히 사용할 수 있습니다.
< button >, < input > 등의 태그가 이에 해당합니다.

0개의 댓글