정의 및 사용 방법

display 속성이 inlne-block 값으로 설정된 요소는
인라인(inline) 요소처럼 한 줄에 다른 요소와 나란히 배치되면서도, 블록(block) 요소처럼 컨테이너 영역을 정의(너비와 높이를 지정)할 수 있는 인라인 레벨의 블록의 컨테이너를 생성합니다.

다음은 '인라인 레벨의 블록 컨테이너' 용어에 대한 간단한 부연설명입니다.
인라인 레벨(inline-level)의 블록 컨테이너
문서 흐름 맥락에서 현재 영역 상자 안에서 텍스트처럼 줄 안에서 배치(inline)되지만 새로운 블록(영역) 상자 수준의 레이아웃을 형성하는 요소를 말합니다.

주요 특징

  • 외부 레이아웃은 일반적인 문서 흐름(static/normal flow)에서 인라인(inline) 요소처럼 한 줄에 다른 요소와 나란히 배치됩니다.
  • 내부 레이아웃은 블록(block) 요소처럼 컨테이너 영역을 정의(너비와 높이를 지정)할 수 있습니다.
  • 기본적으로 가로 너비는 콘텐츠의 크기만큼 차지합니다.
    다만, 플렉스 아이템이나 그리드 아이템으로 사용되는 경우에는 컨테이너의 레이아웃 설정에 따라 달라질 수 있습니다.

기본 예제

display: inline-block을 활용하여 박스 3개를 가로로 배치하고 각각 크기를 지정하는 간단한 예제입니다.

HTML 
<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>
CSS 
.container {
    border: 2px solid red;
}
.box {
  display: inline-block; /* 핵심: - 가로로 나열하면서 크기 지정 가능
                                 - 너비(width)를 지정하지 않으면 콘텐츠의 크기만큼 차지 */
  height: 100px;
  margin: 10px;
  background-color: skyblue;
}

inline 처럼 한 줄에 다른 박스와 나란히 배치되며, block 처럼 지정한 높이(height)만큼 요소의 높이가 적용되지만 inline처럼 가로 너비(width)를 지정하지 않았을 경우 콘텐츠의 너비만큼만 차지합니다.

실제 적용된 모습

display: inline-block이 없다면?

<div>는 브라우저에 기본으로 설정된 display가 block이므로 박스들이 서로 줄바꿈 시켜 세로로 쌓이고 가로 너비를 꽉 채웁니다. 지정한 높이(height)만큼 요소의 높이가 적용됩니다.

실제 적용된 모습

display: inline으로 바꾼다면?

한 줄에 다른 박스와 나란히 배치되며, 지정한 높이(height)가 적용되지 않아 글자 크기 영역만큼 작아집니다.

실제 적용된 모습

레이아웃 특징 상세 설명

일반적인 문서 흐름에서,
display: inline처럼 요소의 앞뒤를 줄바꿈 시키는 특징은 없지만, 너비(width)와 높이(height) 같은 컨테이너 영역을 정의할 수 없는 display: inline과는 다르게 display: block처럼 컨테이너 영역을 정의할 수 있습니다.

다음은 inline 값을 이해하는 데 도움이 되도록 일반적인 문서 흐름에서 block, inline, inline-block을 간단히 비교한 표입니다.

block, inline, inline-block을 간단히 비교한 표
display 값 줄바꿈 발생 여부 일반적인 문서 흐름에서 영역 정의 가능 여부
block 예 예
inline 아니오 아니오
inline-block 아니오 예

잠깐만!
<img>, <iframe>, <input>, <button> 등과 같은 대체 요소(replaced element)들은 브라우저 기본 스타일에서 display: inline이 기본값으로 설정되어 있습니다.
하지만 이 요소들은 일반적인 display: inline 요소들과는 달리, 너비(width)와 높이(height) 같은 컨테이너 영역을 정의할 수 있습니다.

일반적이지 않은 문서 흐름에서의 레이아웃

일반적인 문서 흐름이 아닌, 플렉스 아이템이나 그리드 아이템일 경우에는
요소의 앞과 뒤의 줄바꿈 발생 여부는 다음과 같이 바뀝니다.

  • 플렉스 아이템으로 사용되는 경우에는 플렉스 컨테이너에 설정된 레이아웃에 따라 요소의 앞과 뒤의 배치에 영향을 받습니다. 따라서, display: inline-block인 요소라고 하더라도 플렉스 컨테이너 설정에 따라 줄바꿈할 수 있습니다.
  • 그리드 아이템으로 사용되는 경우에도 플렉스 아이템처럼 그리드 컨테이너에 설정된 레이아웃에 따라 요소의 앞과 뒤의 배치에 영향을 받습니다. 따라서, display: inline-block인 요소라고 하더라도 그리드 컨테이너 설정에 따라 줄바꿈할 수 있습니다.

또한, position: absolute나 position: fixed와 같이 요소가 일반적인 문서 흐름(normal flow)에서 제거되는 경우에는 요소의 앞뒤 줄 배치 여부와 관계없이, 주변 요소의 흐름에 영향을 받지 않고 독립적으로 배치됩니다.

활용 예제

지금까지는 display: inline-block의 기본 개념과 특징을 살펴봤습니다.
이번에는 요소에 display: inline-block을 적용하면 어떤 변화가 생기는지 예제를 통해 확인해보겠습니다.

inline-block이 아닌 요소에 display: inline-block 적용하기

이제 display: inline-block이 아닌 <div>와 <span> 요소의 디스플레이 방식을 먼저 살펴보고, 이후 display: inline-block을 적용했을 때 어떤 방식으로 바뀌는지 확인해 보겠습니다.

HTML 
<h6>diplay가 block인 div 요소</h6>
<div>첫 번째 div</div>  
<div>두 번째 div</div>
<div>세 번째 div</div>
<h6>diplay가 inline인 span 요소</h6>        
<span>첫 번째 span</span>  
<span>두 번째 span</span>
<span>세 번째 span</span>
CSS 
div, span {
    width: 70px; /* 너비 지정 */
    height: 100px; /* 높이 지정 */
    border: 1px solid red; /* 빨간색 테두리 지정 */
}
실제 적용된 모습
  • display가 block인 <div> 요소는 줄바꿈이 발생하며, 일반적인 문서 흐름에서 너비(width)와 높이(height)가 적용됩니다.
  • display가 inline인 <span> 요소는 줄바꿈이 발생하지 않고 한 줄로 표시되며, 일반적인 문서 흐름에서 너비(width)와 높이(height)가 적용되지 않습니다.

앞서 살펴본 <div>와 <span> 요소에 display: inline-block을 적용하면 다음과 같은 변화가 일어납니다.

변경된 CSS
CSS 
div, span {
    width: 70px;
    height: 100px;
    border: 1px solid red;
    display: inline-block; /* 👈 display: inline-block 적용 */
}
실제 적용된 모습

<div>와 <span> 요소에 display: inline-block을 적용하면

  • 요소의 앞과 뒤를 줄바꿈 시키는 특징이 없어지고 한 줄로 표시됩니다.
  • width: 70px과 height: 100px로 지정한 요소의 너비와 높이가 적용됩니다.

일반적이지 않은 문서 흐름에서 줄바꿈 특징

일반적인 문서 흐름이 아닌, 플렉스 아이템이나 그리드 아이템일 경우 display: inline-block으로 설정된 요소의 줄바꿈 특징입니다.

HTML 
<div class="container">
    <h5>플렉스 아이템</h5>
    <div class="flex-box">
        <div class="flex-item">flex-item</div>
        <div class="flex-item">flex-item</div>
        <div class="flex-item">flex-item</div>
    </div>
    <h5>그리드 아이템</h5>
    <div class="grid-box">
        <div class="grid-item">grid-item</div>
        <div class="grid-item">grid-item</div>
        <div class="grid-item">grid-item</div>
        <div class="grid-item">grid-item</div>
        <div class="grid-item">grid-item</div>
        <div class="grid-item">grid-item</div>
    </div>
</div>
CSS 
.container {
    padding: 1em;
    border: 5px solid red;
}
.flex-box {
    display: flex;
    flex-direction: row; /* 컨테이너 설정에 따라 줄바꿈 여부가 달라짐 */
    border: 2px solid silver;
    padding: 1em;
    gap: 7px;
}
.flex-item {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: silver;
}
.grid-box {
    display: grid;
    grid-template-columns: 1fr; /* 컨테이너 설정에 따라 줄바꿈 여부가 달라짐 */
    border: 2px solid blue;
    padding: 1em;
    gap: 7px;
}
.grid-item {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: blue;
    color: #fff;
}

플렉스 아이템이나 그리드 아이템의 경우에는 해당하는 컨테이너 설정에 따라 줄바꿈 여부가 달라집니다.

실제 적용된 모습

브라우저 호환성

display 속성의 inline-block 값에 대한 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
display: inline-block 1 12 1 1

명세서

display 속성의 inline-block 값에 대한 명세서 사양
명세서 사양
display: inline-block CSS Display Module Level 3
#valdef-display-inline-block

같이 보기