inline,block,그리고 inline-block

html 태그들은 크게 block요소와 inline 요소로 나눌 수 있습니다. block은 무엇이고 inline은 무엇일까요? 다음 그림을 함께 살펴볼까요?

inline으로 지정된 엘리먼트는 줄바꿈 없이 다른 엘리먼트들과 한 줄에 나란히 배치됩니다. 하지만 욕심이 많은 block 엘리먼트는 다른 친구들을 밀어내고 혼자서 한 줄을 차지합니다! 여기까지만 이해해도 거의 다 안 것이나 다름 없습니다. 조금 더 자세히 알아봅시다.

inline

inline은 주로 텍스트를 넣을 때 사용되는 형태입니다. 그렇기 때문에 기본적으로 width값이 컨텐츠 영역 만큼 자동으로 잡히게 되며 전후에 라인이 새로 추가 되지 않습니다. 높이 또한 폰트의 크기만큼만 잡힙니다. 그래서 inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

대표적인 inline 코드들로는 span,a,img 등이 있습니다.

block

이름처럼 같은 줄의 다른 것들을 block하는 block 요소는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다.

사실 대부분의 html 요소는 block 요소입니다. 그래도 대표적인 요소들을 꼽아보자면 header, footer, p, li, table, div, h1 등이 있겠네요.

inline-block

그럼 inline-block은 대체 뭘까요? 정말 inline과 block의 속성들을 반씩 닮은 엘리먼트입니다. display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.

참조: https://www.daleseo.com/css-display-inline-block/