CSS - Block(블록) / Inline(인라인) / Inline-block(인라인 블록)

 

CSS의 Block와 Inline과 Inline-block

설명: display 속성의 속성 값.
*display 속성은 웹페이지 상에서 요소들이 어떻게 보여지는 결정합니다.

Block

display 속성이 block으로 지정된 요소는 전후 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적으로 <div>이나 <p>, <h1> 태그 등이 있습니다.
block 요소는 inline 요소와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다.

Inline

display 속성이 inline으로 지정된 요소는 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치됩니다. 대표적인 요소로 <span>이나 <a>, <em> 태그 등을 들 수 있습니다.
inline 요소를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

Inline-block

display 속성이 inline-block으로 지정된 요소는 기본적으로 inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치됩니다. 하지만 inline 요소에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다. 대표적인 inline-block 요소로 <button>이나 <input>, <select> 태그 등을 들 수 있습니다.
inline-block 요소는 명시적으로 해당 요소의 스타일을 display:inline-block로 지정해줘야 합니다. inline-block을 이용하면 여러 개의 요소를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다