CSS의 display 속성: inline, block, inline-block

CSS의 display 속성에서 inline과 block의 차이를 정확히 알고 사용하고 계신가요? 😄 이 둘을 합쳐놓은 inline-block이라는 녀석은 또 뭘까요? 😅

이번 포스팅에서는 display 속성에서 가장 근간이되지만 은근히 많은 분들이 헷갈려하시는 inline과 block 그리고 inline-block에 대해서 알아보도록 하겠습니다.

inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 <span>이나 <a>, <em> 태그 등을 들 수 있습니다.

예를 들어, 여러 개의 inline 엘리먼트 다음과 같이 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 됩니다.

before
<a>A</a>
<span>SPAN</span>
<em>EM</em>
after

span {
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}

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

block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있습니다.

예를 들어, 여러 개의 block 엘리먼트 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.

before
<h1>H1</h1>
<div>DIV</div>
<p>P</p>
after

div {
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}

block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다.

inline-block

display 속성이 inline-block으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작하는데요. 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다. 다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것이지요.

대표적인 inline-block 엘리먼트로 <button>이나 <input>, <select> 태그 등을 들 수 있습니다.

before
<a>A</a>
<span>SPAN</span>
<em>EM</em>
after

span {
  display: inline-block;
  background: yellow;
  width: 200px;
  height: 50px;
  margin: 20px;
  padding: 10px;
}

inline-block 엘리먼트는 위와 같이 명시적으로 헤당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 합니다. inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다.

마치면서

지금까지 간단하게 display 속성값인 inline과 block, inline-block에 대해서 알아보았습니다. 참고로 <span>로 마크업된 엘리먼트가 inline 속성값을 가지고, <div>로 마크업된 엘리먼트가 block 속성값을 가지는 이유는 소위 user agent stylesheet라고 불리는 브라우저의 내장 스타일이 적용되서 그렇습니다. 이렇게 HTML 태그 별로 기본적으로 적용되어 있는 display 속성값은 원하는 값으로 CSS를 이용하서 자유롭게 변경이 가능합니다.

CSS의 display 속성에 대한 좀 더 자세한 내용은 아래 MDN 문서를 참고바랍니다.

• MDN display