display: block

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

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

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

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

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

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

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

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

  • 요소의 앞과 뒤를 줄바꿈 시킵니다.
  • 너비(width)와 높이(height) 같은 컨테이너 영역을 정의할 수 있습니다.
  • <img>, <iframe>, <input>, <button> 등과 같은 대체 요소(replaced element)를 제외하면, display: block이 적용된 요소의 너비를 별도로 지정하지 않으면(auto 값이 아니면) 지정된 요소의 너비는 부모 컨테이너를 꽉 채웁니다.

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

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

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

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

먼저 요소의 앞과 뒤를 줄바꿈에 대한 특징이 다음과 같이 바뀝니다.

  • float이 설정된 경우, 요소는 일반적인 흐름에서 벗어나 떠 있는(floating) 형태로 배치되며, 앞뒤 요소를 자동으로 줄바꿈시키지 않습니다. 대신, 플로팅 순서와 위치에 따라 인접 요소와 나란히 배치될 수 있습니다.
  • position: absolute 또는 position: fixed가 설정된 경우에는 이웃하는 요소와 부모 컨테이너의 흐름에서 벗어나 독자적으로 설정된 위치에 배치되기 때문에 요소를 줄바꿈 시키는 레이아웃 자체가 없게 됩니다.
  • 플렉스 아이템으로 사용되는 경우에는 플렉스 컨테이너에 설정된 레이아웃에 따라 요소의 앞과 뒤의 배치에 영향을 받습니다.
  • 그리드 아이템으로 사용되는 경우에도 플렉스 아이템처럼 그리드 컨테이너에 설정된 레이아웃에 따라 요소의 앞과 뒤의 배치에 영향을 받습니다.

다음으로는 대체 요소(replaced element)를 제외하고 너비를 지정하지 않았을 때 display: block이 적용된 요소의 너비를 별도로 지정하지 않으면(auto 값이 아니면) 지정된 요소의 너비가 부모 컨테이너를 꽉 채우는 특징이 다음과 같이 바뀝니다.

  • float이 설정된 경우에는 콘텐츠의 폭(fit-content 크기)이 너비가 됩니다.
  • position: absolute 또는 position: fixed가 설정된 경우에는 left와 right 속성의 값이 모두 auto 값이 아닌 값으로 지정되어 있을 경우에는 그 차이의 폭이 너비가 됩니다. 이 경우를 제외하면 콘텐츠의 폭(fit-content 크기)이 너비가 됩니다.
  • 플렉스 아이템으로 사용되는 경우에는 플렉스 컨테이너에 설정된 레이아웃에 따라 달라집니다.
  • 그리드 아이템으로 사용되는 경우에는 그리드 컨테이너에 설정된 레이아웃에 따라 달라집니다.

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

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

display: block으로 설정된 요소의 레이아웃 특징 요약표
문서 흐름 줄바꿈 여부 컨테이너 영역 정의 너비를 별도로 지정하지 않으면
일반적인 문서 흐름 예 예 대체 요소를 제외하고 부모 컨테이너 너비를 꽉 채움
float 아니오 예 콘텐츠 크기만큼(fit-content 크기)
position: absolute,
position: fixed		 아니오 예 left와 right 속성의 값이 모두 auto 값이 아닌 값으로 지정되어 있을 경우에는 그 차이의 폭이 너비가 됨. 이 경우를 제외하면 콘텐츠의 폭(fit-content 크기)이 너비가 됨
플렉스 아이템 컨테이너 레이아웃에 따라 다름 예 컨테이너 설정에 따라 다름
그리드 아이템 컨테이너 레이아웃에 따라 다름 예 컨테이너 설정에 따라 다름

예제

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

일반적인 문서 흐름

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

요소의 줄바꿈과 컨테이너 영역 정의
HTML 
<h3>h3</h3>
<p>p</p>
<span>span</span>
CSS 
h3, p, span {
    display: block;
    width: 70px; /* 너비 지정 */
    height: 100px; /* 높이 지정 */
    border: 1px solid red; /* 빨간색 테두리 지정 */
}

위 코드를 적용하면, 각 요소는 앞뒤 요소와 줄바꿈되며 너비와 높이를 가지는 박스로 표시됩니다.

실제 적용된 모습
너비를 별도로 지정하지 않으면
HTML 
<div class="container">
    <p>p</p>
    <input type="text">
</div>
CSS 
.container {
    border: 1px solid red; /* 빨간색 테두리 지정 */
    padding: 1em;
}
p {
    display: block; /* 👈 이 값을 지정하지 않더라도
                       브라우저에서 p요소의 display 기본값은 block입니다. */
    background-color: silver;
}
input {
    display: block;
}

위 코드를 적용하면, p 요소의 너비는 부모 요소인 .container의 너비를 꽉 채웁니다. 이 때, 부모 요소에 안쪽 여백을 설정하는 padding이 있거나, 자식 요소인 자신에 바깥쪽 여백인 margin이 있으면, 이 여백들과 함께 꽉 채우게 됩니다.

그리고, 대체 요소인 <input>의 너비는 부모 요소인 .container의 너비를 꽉 채우는 특징이 없이 원래의 너비를 유지합니다.

실제 적용된 모습

일반적이지 않은 문서 흐름

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

요소의 줄바꿈과 컨테이너 영역 정의
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: block;
    float: right;
    width: 100px;
    height: 50px;
    background-color: gold;
}
.pos-abs {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 50px;
    background-color: yellowgreen;  
}
.flex-box {
    display: flex;
    border: 2px solid silver;
    padding: 1em;
    gap: 7px;
}
.flex-item {
    display: block;
    width: 100px;
    height: 50px;
    background-color: silver;
}
.grid-box {
    display: grid;
    grid-template-columns: repeat(3, auto);
    border: 2px solid blue;
    padding: 1em;
    gap: 7px;
}
.grid-item {
    display: block;
    width: 100px;
    height: 50px;
    background-color: blue;
    color: #fff;
}

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

실제 적용된 모습
너비를 별도로 지정하지 않으면
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: block;
    float: right;
    background-color: gold;
}
.pos-abs {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background-color: yellowgreen;  
}
.flex-box {
    display: flex;
    flex-direction: column;
    border: 2px solid silver;
    padding: 1em;
    gap: 7px;
}
.flex-item {
    display: block;
    background-color: silver;
}
.grid-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 2px solid blue;
    padding: 1em;
    gap: 7px;
}
.grid-item {
    display: block;
    background-color: blue;
    color: #fff;
}

float이 설정된 경우와 position: absolute가 설정된 요소에 너비를 지정하지 않으면 콘텐츠의 크기만큼(fit-content 크기)이 너비가 됩니다. 플렉스 아이템이나 그리드의 아이템의 경우에는 해당하는 컨테이너 설정에 따라 너비가 달라집니다.

실제 적용된 모습

브라우저 호환성

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

명세서

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

같이 보기