CSS 박스 타입 3가지: Block · Inline · Inline-Block

1. Block 레벨 박스 (Block-level box)

• 특징
  1. 가로 공간을 100% 차지
  2. 요소마다 줄바꿈(라인 브레이크) 발생
  3. 너비(width), 높이(height), 마진(margin), 패딩(padding) 전부 적용
• 대표 요소
  <div>, <p>, <h1>~<h6>, <header>, <article> 등
• 예시

/* 기본값: block 요소 */
article {
  width: 600px;
  margin: 20px auto;
  padding: 16px;
  background: #f5f5f5;
}

---

2. 인라인 박스 (Inline box)

• 특징
  1. 컨텐츠 크기만큼 가로폭 차지
  2. 줄바꿈 없이 같은 줄에 나란히 배치
  3. 높이·너비 지정 불가 (height/width 무시)
  4. 마진·패딩은 좌·우에만 적용 (상·하는 무시)
• 대표 요소
  <span>, <a>, <strong>, <em>, <img> 등
• 예시

a {
  /* inline 요소에 height/width 적용해도 무시됨 */
  padding: 0 8px;      /* 좌·우만 적용 */
  margin: 0 12px;      /* 좌·우만 적용 */
  background: #ffeb3b; /* 배경은 컨텐츠 영역만 채움 */
}

---

3. 인라인-블록 박스 (Inline-block box)

• 특징
  • 외형은 Inline(한 줄에 나란히)
  • 내부는 Block(높이·너비·상하 마진·패딩 전부 적용)
  • 즉, 줄바꿈 없이 블록 모델을 적용하고 싶을 때 사용
• 적용 방법
   

.btn {
  display: inline-block;
  width: 120px;     /* 적용 가능 */
  height: 40px;     /* 적용 가능 */
  margin: 10px 8px; /* 상하·좌우 모두 적용 */
  line-height: 40px;
  text-align: center;
  background: #4caf50;
  color: white;
}

• 활용 예
  • 내비게이션 메뉴 링크 (<a>)에 공간 주기
  • 카드·버튼 등 동일 크기 블록을 한 줄에 나란히 배치

---

display 속성으로 변환하기

원래 박스 타입변경할 display 값결과

Inline	display: block;	줄바꿈 생기고, 전체 가로폭 차지
Block	display: inline;	한 줄에 나란히, 높이·너비 무시
Block/Inline	display: inline-block;	한 줄에 나란히, 높이·너비·상하 마진·패딩 모두 적용

 

/* 예: 내비게이션 링크를 inline-block으로 */
nav a {
  display: inline-block;
  margin: 10px 20px 10px 0; /* 상우하좌 모두 가능 */
  padding: 4px 8px;
  background: #ff5722;
  color: white;
  text-decoration: none;
}

 

---

정리 및 팁

1. 기본 박스 타입은 대부분 적절하게 설정되어 있으니, 평소엔 display를 건드리지 않아도 OK.
2. Inline 요소에 높이·상하 마진·패딩을 주고 싶다면 → display: inline-block.
3. Block 요소를 한 줄에 나란히 놓고 싶다면 → display: inline-block 또는 inline (모델 적용 여부 고려).