display: inline-block 속성

 

🟢  inline-block

블록(block) 요소의 속성과 인라인(inline) 요소의 속성을 동시에 가지는 속성.

• 인라인(inline)처럼 한 줄에 여러 블록 배치가 가능하고, 블록(block)처럼 너비(width)와 높이(height) 조절이 가능하다.

📊  (inline) vs (block) vs (inline-block) 비교 📊 

특징	inline	block	inline-block
줄 바꿈	X (옆으로 나열)	O (새 줄 차지)	X (옆으로 나열)
기본 너비	콘텐츠만큼	부모의 100%	콘텐츠만큼
크기 지정	X	O	O
상하 여백	X (배경만 칠해짐)	O	O

 

 

◼️  텍스트 정렬용 속성

.container {
  text-align: center;
}

.box {
  display: inline-block;
}

🔹 text-align: center;: 부모 요소에게 사용하면 inline / inline-block 요소를 가로 중앙에 정렬할 수  있다.

• text-align은 자기 자신이 아니라 "자식 요소"를 정렬한다.

 

 

❗ 주의사항 ❗

inline-block 요소 사이에 공백(space)가 있으면 브라우저는 코드의 빈 공간을 하나의 문자로 인식해 간격이 생길 수 있다.

.container {
  font-size: 0;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: blue;
  font-size: 16px;
}

• 해결 방법: 요소 사이 공백 제거, 부모 요소에 font-size: 0; 적용.

 

 

📍  POINT 📍 

✔️ inline-block 은 크기 조절이 가능한 인라인 요소이다. ✔️

✔️ 가로 메뉴바를 만들 때 과거에는 float 을 많이 썼으나, inline-block 을 거쳐 현재는 flex 를 사용한다.

하지만 단순한 버튼 나열, 간단 레이아웃에서는 직관적이라 유용하게 사용할 수 있다. ✔️

 

---

 

⚙️ 실 전 예제 코드 ⚙️

<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>

Box 1

Box 2

Box 3