CSS Display inline, inline-block, block

CSS에서 자주 사용되는 display 속성!
이번에는 display 속성의 inline, inline-block, block을 알아보겠습니다.

block VS inline

block

html에서 가장 흔하게 쓰이는 태그인 "div"
div, p태그는 대표적인 block 요소입니다. display속성이 block으로 설정된 요소는 페이지 내에서 각각의 세로줄에 가로의 크기가 부모요소의 100%로 차지합니다.

이 때 width(가로)와 height(세로)를 정할 수 있습니다.

inline

div 짝궁인 span은 대표적인 inline요소인데요!

inline으로 설정된 요소는 진공포장을 한 것 마냥 내용을 감싸고 공간이 허용하는 한 까지 같은 블럭에 배정됩니다.

block과는 반대로 가로와 세로를 정할 수 없고, 그 크기는 오로지 포함하고 있는 내용에 의해서만 결정됩니다.

inline-block

inline-block의 성질은 block속성과 inline의 속성을 둘 다 가집니다. block 성질 중 가로와 세로 크기를 설정할 수 있고, inline요소와 같은 라인에 배치되는 성질이 있습니다.