[CSS] display: block, inline, inline-block

display: block, inline, inline-block

display 속성 중에서 가장 기본이자 중요한 block, inline, inline-block에 대해서 정리해 보았다. 특징을 살펴보고, 어떤 차이점들이 있는지 알아보자!

block

• 한 줄에 한 개만 배치 (자동 줄바꿈)
• 해당 라인의 모든 너비 차지 (width 기본값= 100%)
• 크기 지정 가능
• 박스 모델의 모든 속성 값 다룰 수 있다.
• 자식으로 block, inline 요소 가질 수 있다.
  
  

💡<p>, <pr> 태그는 예외적으로 block 요소를 자식으로 가질 수 없다.

inline

• 한 줄에 여러 개 배치
• 콘텐츠의 크기만큼만 차지 (기본 너비 값 = 콘텐츠의 너비 값)
• 크기 지정 불가능
• 좌우 margin, padding, border 값만 가질 수 있다.
• 자식으로 inline 요소를 가질 수 있지만, block 요소는 가질 수 없다.
• 태그 사이의 공백이나 개행이 있을 경우 4px의 여백을 가진다.
  
  

💡 HTML 5부터 <a>태그는 예외적으로 block 요소를 자식으로 가질 수 있다.

inline-block

• 한 줄에 여러 개 배치
• 콘텐츠의 크기만큼만 차지 (기본 너비 값= 콘텐츠의 너비 값)
• 박스 모델의 모든 속성 값 다룰 수 있다.
• 내부적으로는 block 요소 특징을 가지고, 외부적으로는 inline 요소 특징을 가진다.
• 즉 block 요소처럼 박스 모델 속성 값을 다룰 수 있으면서, inline 요소처럼 콘텐츠의 크기만큼만 차지한다.
• 태그 사이의 공백이나 개행이 있을 경우 약4px의 여백을 가진다.

🧩 무엇이 다른지 비교해 보자!

blcok

한 줄에 모든 너비 차지, 한 줄에 하나만 배치 가능
크기, margin, padding, border 속성 가질 수 있다.
inline 요소와 block 요소 포함 가능

inline

콘텐츠 크기만큼 차지, 한 줄에 여러 개 배치 가능
크기 값 가질 수 없다.
좌우 margin, padding, border 속성만 가질 수 있다.
inline 요소만 포함 가능

inline-block

(inline)
콘텐츠 크기만큼 차지, 한 줄에 여러 개 배치 가능
(block)
크기, margin, padding, border 속성 가질 수 있다.