CSS 박스 모델 실전 적용: 패딩과 마진 완벽 정리

웹 페이지의 디자인을 할 때, 요소들 간의 간격을 잘 조절하는 것은 매우 중요합니다. 이를 위해 CSS의 **박스 모델(Box Model)**을 이해하고 활용하는 것이 필수입니다. 이 글에서는 **패딩(padding)**과 **마진(margin)**을 중심으로 박스 모델을 실전에서 어떻게 활용할 수 있는지 살펴봅니다.

---

📦 박스 모델 복습

• Padding: 요소의 내용과 테두리 사이의 공간입니다. 내부 여백이라고도 하며, 보통 배경색이 적용된 요소에는 필수입니다.
• Margin: 요소 외부의 공간, 즉 요소와 다른 요소 사이의 거리입니다.

---

1️⃣ 패딩 실습: 내부 공간 만들기

🔹 헤더에 패딩 적용하기

배경색이 있는 header 요소에 padding: 20px;을 적용하면, 텍스트와 배경 테두리 사이에 여유 공간이 생깁니다.

css
.main-header { padding: 20px; }

🔹 방향별 패딩 지정

css

padding: 20px 40px;

• 상하: 20px
• 좌우: 40px
  → shorthand 사용으로 코드 간결화 가능!

---

2️⃣ 마진 실습: 요소 간 거리 만들기

🔹 리스트 항목 간 간격 조절

css

li { margin-bottom: 10px; }

li:last-child { margin-bottom: 0; }

• 마지막 항목에는 마진 제거해 깔끔하게 마무리!

🔹 글로벌 마진 & 패딩 리셋

브라우저의 기본 여백 제거:

css

*

{ margin: 0; padding: 0; }

 

→ **초기화(reset)**는 모든 CSS 프로젝트의 시작점!

---

3️⃣ 다양한 예시로 마진 & 패딩 다루기

• .aside 영역: 위아래 패딩만 설정하고, padding: 50px 0;로 축약 가능
• .main-header와 .h2, .post-header, p, h3, article 등 다양한 요소에 margin-bottom 지정하여 구조적인 수직 간격 부여
• 리스트(ul, ol)의 마커가 사라진 경우 margin-left를 다시 설정해 복구

---

⚠️ 주의: Margin Collapsing 현상

두 요소의 마진이 겹치면 어떻게 될까요?

css

복사편집

p

{ margin-bottom: 15px; }

 

h3

{ margin-top: 40px; }

• 예상: 15 + 40 = 55px?
• 실제: **더 큰 값(40px)**만 적용됩니다.
  → 이것이 **margin collapsing(마진 병합)**입니다.

---

✅ 마무리 요약

목적사용하는 속성

요소 내부 여백	padding
요소 외부 여백	margin
수직 간격 구성	margin-bottom 권장
초기 상태 정리	* { margin: 0; padding: 0; }