CSS display: inline-block

웹 디자인에서 요소를 한 줄로 나열하면서도 크기를 자유롭게 조절하고 싶을 때 사용하는 display: inline-block 속성에 대해 알아보겠습니다.

이 속성은 이름 그대로 inline의 특징과 block의 특징을 모두 가지고 있는 하이브리드 성격의 속성입니다.

---

1. 주요 특징 (Why use it?)

inline-block은 주변 요소들과의 관계에서는 inline처럼 행동하고, 자기 자신의 크기를 결정할 때는 block처럼 행동합니다.

• 한 줄에 나열: block 요소(예: div)와 달리, 줄 바꿈 없이 다른 요소와 같은 라인에 가로로 나열됩니다.
• 크기 설정 가능: inline 요소(예: span)와 달리, width, height, margin, padding 속성을 모두 완벽하게 적용할 수 있습니다.
• 텍스트 정렬 영향: 부모 요소의 text-align: center; 속성을 사용하면 inline-block 요소들을 간편하게 가로 중앙으로 정렬할 수 있습니다.

---

2. inline vs block vs inline-block 비교

특징	inline	block	inline-block
줄 바꿈	없음 (옆으로 나열)	있음 (무조건 새 줄)	없음 (옆으로 나열)
기본 너비	콘텐츠만큼	부모의 100%	콘텐츠만큼
크기 지정	불가능	가능	가능
상하 여백	적용 안 됨 (배경만 칠해짐)	가능	가능

---

🖥️ 실전 예제 코드

보통 가로로 나열되는 메뉴 버튼이나 카드를 만들 때 자주 활용됩니다.

HTML

 

<style>
  .box {
    display: inline-block; /* 핵심 속성 */
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

---

⚠️ 주의할 점: 공백(Gap) 문제

inline-block 요소를 사용하면 HTML 코드 상의 줄 바꿈이나 띄어쓰기가 화면에서 **약간의 미세한 틈(약 4px)**으로 나타나는 현상이 있습니다.

• 원인: 브라우저가 코드의 빈 공간을 하나의 문자로 인식하기 때문입니다.
• 해결법: 부모 요소에 font-size: 0;을 주거나, HTML 태그 사이의 공백을 제거하면 해결됩니다.

---

학습 정리

• **inline-block**은 "크기 조절이 가능한 인라인 요소"라고 이해하면 가장 쉽습니다.
• 가로 메뉴바를 만들 때 과거에는 float을 많이 썼으나, inline-block을 거쳐 현재는 **flex**를 사용하는 추세입니다.
• 하지만 단순한 버튼 나열이나 간단한 레이아웃에서는 여전히 직관적이고 강력한 도구입니다.

---

요소의 성격을 유연하게 바꾸는 inline-block 속성을 정복하셨습니다!

---