CSS display block inline inline-block 차이

inline의 기준

display: inline은 요소를 inline box로 만든다.
inline 요소는 문장 안의 글자처럼 흐른다.

문장 안에 <span class="highlight">강조 텍스트</span>가 있다.

.highlight {
  display: inline;
  color: #d63b3b;
  background: #fff0f0;
}

span은 앞뒤에 자동 줄바꿈을 만들지 않는다.
문장 흐름 안에서 필요한 만큼의 폭만 차지한다.

대신 inline은 박스 크기를 직접 다루기 어렵다.
width와 height를 줘도 일반적인 block 요소처럼 크기가 잡히지 않는다.
위아래 margin도 레이아웃을 밀어내는 용도로 기대하기 어렵다.

그래서 inline은 텍스트 일부를 강조하거나 문장 안에 작은 의미 단위를 넣을 때 적합하다.
버튼처럼 클릭 영역의 높이와 여백을 명확히 만들어야 하는 요소에는 보통 부족하다.

inline-block의 기준

display: inline-block은 이름 그대로 inline과 block의 성격을 섞은 값이다.
바깥에서는 inline처럼 옆으로 흐르고, 안쪽에서는 block처럼 크기를 가질 수 있다.

<a class="chip" href="/posts/CSS-position-relative와-absolute-차이">position</a>
<a class="chip" href="/posts/CSS로-글래스모피즘-구현하기">glassmorphism</a>

.chip {
  display: inline-block;
  width: 120px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f0f4f8;
  text-align: center;
}

위 예시에서 .chip은 서로 같은 줄에 놓일 수 있다.
동시에 width, padding, text-align 같은 박스 스타일도 다루기 쉽다.

작은 버튼, 태그, 배지, 메뉴 항목처럼 줄 안에 나란히 놓이면서 클릭 영역이 분명해야 하는 UI에 잘 맞는다.

세 값의 차이

세 값을 비교하면 선택 기준이 빨라진다.

block은 큰 구조를 쌓을 때 좋다.
inline은 텍스트 흐름을 깨지 않는 장식에 좋다.
inline-block은 줄 안에 놓이는 작은 박스를 만들 때 좋다.

width와 height의 차이

초보자에게 가장 자주 생기는 문제는 span에 width를 줬는데 크기가 바뀌지 않는 상황이다.

<span class="label">NEW</span>

.label {
  display: inline;
  width: 80px;
  height: 32px;
  background: #ffe8a3;
}

span은 기본적으로 inline 요소다.
그래서 위 코드처럼 width와 height를 줘도 원하는 배지 모양이 나오지 않을 수 있다.

이럴 때는 inline-block으로 바꾸는 편이 단순하다.

.label {
  display: inline-block;
  min-width: 80px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #ffe8a3;
  text-align: center;
}

이제 배지는 문장 옆에 붙을 수 있고, 동시에 최소 폭과 안쪽 여백을 가진 박스로 보인다.

margin 동작의 차이

inline 요소는 좌우 margin은 비교적 직관적으로 보인다.
하지만 위아래 margin은 주변 줄 높이와 inline formatting context의 영향을 받아, block 요소처럼 영역을 밀어내는 느낌이 약하다.

.word {
  display: inline;
  margin-top: 20px;
  margin-bottom: 20px;
}

위 코드는 텍스트 줄 사이를 안정적으로 벌리는 방법으로 보기 어렵다.
텍스트 줄 간격은 보통 line-height로 다루고, 박스 사이 간격은 block 또는 inline-block 상태에서 margin이나 gap으로 다루는 편이 예측 가능하다.

.tags {
  display: flex;
  gap: 8px;
}

.tag {
  display: inline-block;
  padding: 6px 10px;
}

요소를 여러 개 나란히 배치하는 UI라면 부모에 display: flex를 쓰는 방식도 자주 선택된다.
다만 개별 태그 자체가 박스처럼 보여야 한다면 자식은 여전히 inline-block 또는 flex item으로 다루는 것이 자연스럽다.

선택 기준

글 본문처럼 위에서 아래로 쌓이는 덩어리는 block을 먼저 생각한다.
문장 일부를 색칠하거나 굵게 보이는 정도라면 inline을 먼저 생각한다.
문장 안이나 한 줄 안에 놓이지만 크기와 여백을 주고 싶다면 inline-block을 먼저 생각한다.

.section {
  display: block;
}

.emphasis {
  display: inline;
}

.button-like-link {
  display: inline-block;
}

실무에서는 display 하나만 보고 레이아웃을 끝내지 않는다.
큰 배치는 flex나 grid로 잡고, 작은 요소의 성격을 block, inline, inline-block으로 조정하는 경우가 많다.

정리

block은 한 줄을 차지하는 박스다.
큰 레이아웃 단위를 만들 때 안정적이다.

inline은 글자 흐름 안에 들어가는 박스다.
텍스트 일부를 감싸기에 좋지만 크기 제어에는 약하다.

inline-block은 줄 안에 놓이는 박스다.
버튼, 태그, 배지처럼 옆으로 흐르면서 크기와 여백이 필요한 요소에 잘 맞는다.

처음 CSS를 배울 때는 “옆에 붙어야 하는가”, “크기를 직접 줘야 하는가”만 봐도 선택이 쉬워진다.
옆에 붙고 크기도 필요하면 inline-block이다.
위아래로 쌓이면 block이다.
문장 일부라면 inline이다.

참고 자료

• MDN Web Docs - display CSS property
• MDN Web Docs - Block and inline layout in normal flow
• W3C - CSS Display Module Level 3