[CSS] Display 속성 (inline / block/ inline-block)

Display 속성이란?

display 속성은 HTML 요소가 레이아웃에서 배치되는 방식을 결정하는 중요한 CSS 속성이다.
브라우저는 각 요소에 기본display값을 할당하지만, 이 속성을 변경하여 요소의 배치 방식과 동작을 커스터마이징할 수 있다.

주요 display의 속성값은 INLINE, BLOCK, INLINE-BLOCK이다.
이번 포스팅에서는 위 세 가지 속성값에 대해 알아보자.

---

Display 사용법 예시

• h태그: 기본값이 블록(block)레벨이다.
• span태그: 기본값이 인라인(inline) 레벨이다.

display 속성을 변경하면 블록 요소를 인라인 요소처럼, 인라인 요소를 블록 요소처럼 동작하게 만들 수 있다.

 

---

Display의 속성값 종류

1) inline

display: inline으로 설정된 요소는 전후 줄바꿈 없이 한 줄에 나란히 배치된다.
기본 속성값이 inline인 요소로는 span, a, strong 태그가 있다.

특징

• width, height 속성은 무시된다.
• margin과 padding속성은 좌우 간격에만 반영이 되고, 상하 간격에는 영향을 미치지 않는다.
• 요소는 다른 요소와 한 줄에 나란히 배치된다.

예시

<span style="display: inline; padding: 10px; border: 1px solid black;">Inline 요소</span>

2) block

display: block으로 설정된 요소는 전후 줄바꿈이 들어가 다른 요소를 다른 줄로 밀어내고 혼자 한 줄을 차지한다.
블록 요소는 레이아웃에서 독립적인 단위를 형성하며, 주로 컨테이너 역할을 한다.

특징

• 요소 앞 뒤에 줄바꿈이 들어가며, 문서의 흐름을 끊는다.
• width, height, margin, padding 속성이 모두 적용된다.
• 기본적으로 width는 부모 요소의 전체 너비를 차지한다. (남는 부분은)

예제

<div style="display: block; padding: 10px; border: 1px solid black;">Block 요소</div>

3) inline-block

display: inline-block은 인라인 요소처럼 배치되지만, 블록 요소처럼 크기와 간격을 설정할 수 있다.
이름처럼 inline과 block의 장점이 결합된 형태이다.

특징

• 다른 요소들과 한 줄에 나란히 배치된다.
• width, height, margin, padding 속성이 모두 적용된다.
• 레이아웃 설계 시 버튼, 카드 등 정렬이 필요한 요소에 주로 사용된다.

예제

<span style="display: inline-block; width: 100px; height: 50px; border: 1px solid black;">Inline-Block 요소</span>

---

정리

Display 속성	설명
INLINE	width와 height가 무시된다. 여백(margin)과 패딩(padding)은 요소를 수평 방향에만 적용되며, 수직 방향에는 영향을 미치지 않는다.
BLOCK	블록 요소는 문서의 흐름을 끊고 독립적인 레이아웃을 형성한다. width, height, margin, padding 속성이 모두 적용된다.
INLINE-BLOCK	인라인 요소처럼 나란히 배치되지만, 블록 요소처럼 width, height, margin, padding 속성이 모두 적용된다. 레이아웃 조정 시 유용하다.

참고 자료

MDN Web Docs: display
CSS Tricks: display