inline, inline-block, block

display 속성값을 설정할 때 '이 요소는 inline이니깐 block 으로 바꿔야 하고 저 요소는 block이니 inline으로 바꾸는게 좋다' 라는 설명이 따를 때 대체 왜..? 뭐가 달라지는 거지..? 매번 헷갈리는 부분이었다. display 속성값인 inline, block, inline-block에 대해 알아보았다.

CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다.

inline

inline으로 지정된 앨리먼트는 줄바꿈 없이 한 줄에 연이어 다른 앨리먼트를 배치된다.

<span>, <a>, <img> 태그 등이 inline 요소이다.

• inline 앨리먼트를 사용할 때 주의할 점
  • width와 height 속성을 지정해도 무시된다. 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문!
  • margin과 padding 속성은 좌우 간격만 반영되고, 상하 간격은 반영되지 않는다.

block

block은 새 줄에서 시작해 좌우로 최대한 늘어난다. block 앨리먼트에 width를 설정하면 늘어나지 않게 할 수 있다. 좌우 margin을 auto로 설정하면 해당 요소를 컨테이너 안에서 가로 중앙에 오게 할 수 있다.

<header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등이 모두 block 요소에 해당하는 태그이다.

• block 앨리먼트를 사용할 때 주의할 점
  • 브라우저 창이 엘리먼트 너비보다 좁을 때는 페이지에 가로 스크롤바가 생긴다.
    따라서 이런 경우에는 width 대신 max-width를 사용하여 작은 창을 처리하는 방식을 개선할 수 있다.

inline-block

inline 앨리먼트처럼 줄바꿈 없이 한 줄에 다른 앨리먼트들과 나란히 배치된다. 하지만 inline 앨리먼트와 달리 width와 height 속성을 지정해도 적용이 되고, margin과 padding 속성 역시 좌우뿐 아니라 상하 모두 반영된다.

inline-block 앨리먼트로는 button과 select 등이 있다.