display: inline-block

이 글에서는 display: inline-block으로 설정된 요소가 화면에서 어떻게 디스플레이(표시)되는지 자세히 다룹니다.

display 속성이 inlne-block 값으로 설정된 요소는
일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈 시키는 특징이 없고, 컨테이너 영역을 정의할 수 있는
인라인 레벨의 블록의 컨테이너를 생성합니다.

display: inline-block 요소의 레이아웃 특징

일반적인 문서 흐름에서,
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인 요소라고 하더라도 플렉스 컨테이너 설정에 따라 줄바꿈할 수 있습니다.

예제

지금까지는 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

같이 보기