콘텐츠로 건너뛰기

[CSS] display 속성 – block, inline, inline-block

display 속성은 가장 중요한 CSS 속성 중 하나로, 요소를 어떻게 배치할지를 결정한다.

모든 요소는 기본 display 속성을 가지는데 그 중 대표적인 값이 block 과 inline 이다. 이 두 속성의 특징을 동시에 가지는 inline-block 속성도 있는데, 이렇게 3가지 속성이 CSS에서 가장 많이 사용된다. 이 포스팅에서는 block, inline, inline-block에 대해서 정리한다.

display 속성 – block, inline 특징 및 차이점

아래 그림을 보면 두 속성의 차이점에 대해서 쉽게 이해할 수 있다.

블록 요소 (block elements)

block

block

block

block


인라인 요소 (inline elements)
inline inline inline inline inline

block 요소는 라인 하나 전체를 다 차지한다. inline 요소는 컨텐츠 너비(그림에서는 inline 이라는 텍스트 사이즈) 만큼을 차지하며 라인 하나에 여러 요소가 배치 될 수 있다.

또한 block 요소는 inline 요소를 컨텐츠로 가질 수 있지만, inline 요소는 block 요소를 가질 수 없다. 대표적인 block 요소로 div 태그가, inline 요소로는 span 태그가 있다. div안에 span을 넣을 수 있지만 span 안에 div를 넣지 않는다는 점을 생각해보면 쉽게 이해할 수 있다.

정리 – block vs. inline 차이점

속성 별 특징blockinline
줄바꿈줄바꿈 O.
새로운 라인에서 시작한다		줄바꿈 X.
새로운 라인에서 시작하지 않는다. 어디에서나 시작할 수 있다.
요소 너비사용 가능한 전체 너비를 차지한다컨텐츠 너비 만큼의 너비를 차지한다
높이 및 너비높이(height)과 너비(width) 크기 설정 가능높이(height)와 너비(width) 설정 불가능. 컨텐츠 만큼의 크기를 차지하기 때문
상하 마진상하 마진(margin-top, margin-bottom)을 가질 수 있다상하 마진(margin-top, margin-bottom)을 가질 수 없다. 좌우 마진만 가능
컨텐츠inline, block 요소를 컨텐츠로 가질 수 있다block 요소를 컨텐츠로 가질 수 없다.
(데이터 또는 inline 요소만 가능)
대표적인 요소div, p, h1~h6, ul, olspan, a, small, big, strong

코드 예제 – block 속성 vs inline 속성

display 속성에 따라 요소가 어떻게 배치되는지 확인하기 위해 요소의 배경색을 색칠해보았다.

HTML – inline 속성 확인 (span 태그)

<div> 
span은 <span class="colored"> inline 요소 </span> 입니다. inline 요소의 특성을 나타내기 위해 요소 배경을 색칠했습니다. 
</div>

HTML – block 속성 확인 (p 태그)

<div> 
p는 <p class="colored"> block 요소 </p>입니다. block 요소의 특성을 나타내기 위해 요소 배경을 색칠했습니다. 
</div>

CSS

.colored{
  background-color: #FFFF66;
}

결과

span은 inline 요소입니다. inline 요소의 특성을 나타내기 위해 요소 배경을 색칠했습니다.
p는

block 요소

입니다. block 요소의 특성을 나타내기 위해 요소 배경을 색칠했습니다.

span 태그는 줄 바꿈 없이 배치되며 내부 텍스트 사이즈만큼의 너비를 차지한다. 반면 block 속성인 p 태그는 새로운 줄에 배치되었고 한 줄만큼의 너비를 차지한다.

inline-block

inline-block 속성은 inline과 block 속성의 특징을 함께 갖는다.

  • 줄 바꿈 없이 한 줄에 다른 요소들과 배치 가능 (inline 속성)
  • width, height, margin-top, margin-bottom 설정 가능 (block 속성)

div, p 등 block 요소를 한 줄에 여러 개 배치하고 싶을 때 자주 사용된다.

코드 예제. inline-block 속성 사용하여 div를 한 줄에 배치하기

[display: inline-block 적용 전]
children div 1
children div 2
children div 3
[display: inline-block 적용 후]
children div 1
children div 2
children div 3
<div class="div-parents"> 
<div class="div-children"> children div 1 </div>
<div class="div-children"> children div 2 </div>
<div class="div-children"> children div 3 </div>
</div>
.div-parents{
  border: solid 1px gray;
  padding: 10px;
  background-color: #d3cec2;
  
}
.div-children{
  display:inline-block; /* inline-block 속성을 적용해 한 줄에 배치*/
  width: 80px;
  height: 80px;
  border: solid 1px gray;
  background-color: #ecd554;
}

관련 글(Related Posts)