display: inline

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

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

다음은 브라우저의 기본 스타일시트에서 display: inline이 기본값으로 설정되어 있는 대표적인 요소들입니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일시트를 가지고 있습니다. '브라우저의 기본 스타일시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

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

display: inline이 설정된 요소의 레이아웃은 일반적인 문서 흐름에서와 그렇지 않은 경우로 나누어 살펴볼 필요가 있습니다.

일반적인 문서 흐름에서의 레이아웃

일반적인 문서 흐름에서 display: inline인 요소는 다음의 특징을 가집니다.

  • 요소의 앞과 뒤를 줄바꿈 시키는 특징이 없습니다.
  • <img>, <iframe>, <input>, <button> 등과 같은 대체 요소(replaced element)를 제외하면, 너비(width)와 높이(height) 같은 컨테이너 영역을 정의할 수 없습니다.
대체 요소에 대한 오해

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

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

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

일반적인 문서 흐름이 아닌, 아래와 같은 경우에는 일반적인 문서 흐름에서 벗어난 display: inline이 설정된 요소는 기본적인 레이아웃 특징과 다르게 동작합니다.

일반적이지 않은 문서 흐름의 경우
  • float이 설정된 경우
  • position: absolute 또는 position: fixed가 설정된 경우
  • 플렉스 박스의 아이템으로 사용되는 경우
  • 그리드 박스의 아이템으로 사용되는 경우

이러한 경우에는 일반적인 문서 흐름을 벗어나 독자적인 레이아웃으로 배치되기 때문에 다음과 같은 특징을 가집니다.

먼저 요소의 앞과 뒤를 줄바꿈 시키는 특징이 없는 것은 다음과 같이 바뀝니다.

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

요소의 너비나 높이같은 컨테이너 영역을 정의할 수 없는 특징이 다음과 같이 바뀝니다.

  • float이 설정된 경우에는 요소의 너비나 높이같은 컨테이너 영역을 정의할 수 있습니다.
  • position: absolute 또는 position: fixed가 설정된 경우 요소의 너비나 높이같은 컨테이너 영역을 정의할 수 있습니다.
  • 플렉스 박스의 아이템으로 사용되는 경우 요소의 너비나 높이같은 컨테이너 영역을 정의할 수 있습니다. 이때, 아이템의 너비나 높이를 별도로 설정하지 않으면 플렉스 박스의 레이아웃 설정의 영향을 받습니다.
  • 그리드 박스의 아이템으로 사용되는 경우 요소의 너비나 높이같은 컨테이너 영역을 정의할 수 있습니다. 이때, 아이템의 너비나 높이를 별도로 설정하지 않으면 그리드 박스의 레이아웃 설정의 영향을 받습니다.

display: inline 요소의 레이아웃 특징 요약표

다음은 display: inline이 설정된 요소의 레이아웃 특징을 한 눈에 볼 수 있게 표로 정리한 것입니다.

display: inline으로 설정된 요소의 레이아웃 특징 요약표
문서 흐름 줄바꿈 여부 컨테이너 영역 정의
일반적인 문서 흐름 아니오 아니오
(단, 대체 요소들은 가능)
float 아니오 예
position: absolute,
position: fixed		 아니오 예
플렉스 박스의 아이템 컨테이너 설정에 따라 다름 예
그리드 박스의 아이템 컨테이너 설정에 따라 다름 예

예제

여러 예제들을 통해서 display: inline으로 설정된 요소의 레이아웃 특징을 살펴보겠습니다.

일반적인 문서 흐름

일반적인 문서 흐름에서 display: inline으로 설정된 요소의 레이아웃 특징입니다.

요소의 줄바꿈과 컨테이너 영역 정의
HTML 
<div class="container">
    <span>span</span>
    <strong>strong</strong>
    <input type="text" placeholder="input">
    <p>p</p>
</div>
CSS 
.container {
    border: 5px solid red; /* 빨간색 테두리 지정 */
    padding: 1em;
}
span, strong, input, p {
    display: inline;
    width: 70px; /* 너비 지정 */
    height: 100px; /* 높이 지정 */
    background-color: yellowgreen;
}
실제 적용된 모습

위 코드를 적용한 실제 모습을 보면, 각 요소는 앞뒤 요소와 줄바꿈 시키는 특징이 없는 현재 영역 상자(.container) 안에서 텍스트처럼 줄 안에서 배치(inline)된 인라인 레벨 컨테이너로 표시됩니다. 이 요소들은 일반적인 문서 흐름에서는 너비(width)와 높이(height) 같은 컨테이너 영역을 정의할 수 없음을 알 수 있습니다.

하지만, 대체 요소인 input은 너비와 영역을 정의할 수 있음을 알 수 있습니다.

일반적이지 않은 문서 흐름

일반적이지 않은 문서 흐름에서 display: inline으로 설정된 요소의 레이아웃 특징입니다.

요소의 줄바꿈과 컨테이너 영역 정의
HTML 
<div class="container">
    <h5>float이 설정된 경우</h5>
    <div class="float">float</div>
    <h5>position: absolute가 설정된 경우</h5>
    <div class="pos-abs">position: absolute</div>
    <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;
    position: relative;
}
.float {
    display: inline;
    float: right;
    width: 100px;
    height: 50px;
    background-color: gold;
}
.pos-abs {
    display: inline;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 50px;
    background-color: yellowgreen;  
}
.flex-box {
    display: flex;
    flex-direction: row; /* 컨테이너 설정에 따라 줄바꿈 여부가 달라짐 */
    border: 2px solid silver;
    padding: 1em;
    gap: 7px;
}
.flex-item {
    display: inline;
    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;
    width: 100px;
    height: 50px;
    background-color: blue;
    color: #fff;
}

위 코드를 적용하면, 각 요소는 너비와 높이를 가지는 박스로 표시됩니다. 하지만, float이 설정된 경우와 position: absolute가 설정된 요소는 일반적인 문서의 흐름에서 벗어나 플롯팅되기 때문에 요소의 줄바꿈의 대상 자체가 성립하지 않으며, 플렉스 박스나 그리드 박스의 아이템의 경우에는 해당하는 컨테이너 설정에 따라 줄바꿈 여부가 달라집니다.

실제 적용된 모습

브라우저 호환성

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

명세서

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

같이 보기