CSS margin, padding, border 완벽 정리

CSS margin, padding, border 완벽 정리

---

1. 개요

웹 페이지에서 요소(예: 박스, 버튼, 이미지 등)는 단순한 글자 덩어리가 아니라
하나의 사각형 박스(Box)로 구성되어 있습니다.
이 박스는 CSS 박스 모델(Box Model)이라 불리며,
그 구조는 다음 4개의 영역으로 이루어집니다.

 ┌───────────────────────────────┐
 │ margin │ ← 바깥 여백
 │ ┌─────────────────────────┐ │
 │ │ border │ │ ← 테두리
 │ │ ┌───────────────────┐ │ │
 │ │ │ padding │ │ │ ← 안쪽 여백
 │ │ │ ┌─────────────┐ │ │ │
 │ │ │ │ content │ │ │ │ ← 실제 내용
 │ │ │ └─────────────┘ │ │ │
 │ │ └───────────────────┘ │ │
 │ └─────────────────────────┘ │
 └───────────────────────────────┘

각각의 역할은 다음과 같습니다.

영역	설명
content	실제 텍스트나 이미지가 들어 있는 영역
padding	콘텐츠와 테두리(border) 사이의 내부 여백
border	요소의 외곽선을 그리는 테두리
margin	요소와 다른 요소 사이의 외부 여백

---

2. margin: 바깥 여백

margin은 요소 바깥쪽의 여백을 지정합니다.
즉, 이 요소와 다른 요소 사이의 간격을 결정합니다.

div {
  margin: 20px;
}

이 코드는 요소의 상하좌우 모든 방향에 20px의 바깥 여백을 줍니다.

세부 지정

속성	설명	예시
margin-top	위쪽 여백	margin-top: 10px;
margin-right	오른쪽 여백	margin-right: 15px;
margin-bottom	아래쪽 여백	margin-bottom: 20px;
margin-left	왼쪽 여백	margin-left: 25px;

축약형(Shorthand)

margin은 한 줄로 1~4개의 값을 설정할 수 있습니다.

작성 방식	의미	예시
margin: 10px;	상·우·하·좌 모두 10px
margin: 10px 20px;	상·하 = 10px, 좌·우 = 20px
margin: 10px 20px 30px;	상 = 10px, 좌·우 = 20px, 하 = 30px
margin: 10px 20px 30px 40px;	상, 우, 하, 좌 순서

예시:

.box {
  margin: 10px 20px 30px 40px;
}

→ 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px

---

3. padding: 안쪽 여백

padding은 콘텐츠(content)와 테두리(border) 사이의 내부 간격을 의미합니다.
즉, 텍스트나 이미지가 요소의 경계에 딱 붙지 않도록 “안쪽 여백”을 만들어 줍니다.

div {
  padding: 15px;
}

이 코드는 콘텐츠가 네 방향으로 15px 떨어져 표시됩니다.

세부 지정

속성	설명	예시
padding-top	위쪽 안쪽 여백	padding-top: 10px;
padding-right	오른쪽 안쪽 여백	padding-right: 15px;
padding-bottom	아래쪽 안쪽 여백	padding-bottom: 20px;
padding-left	왼쪽 안쪽 여백	padding-left: 25px;

축약형(Shorthand)

padding도 margin과 같은 순서(상 → 우 → 하 → 좌)로 작성합니다.

padding: 10px 20px 30px 40px;

---

4. border: 테두리

border는 요소의 경계선을 그리는 영역입니다.
박스의 가장 바깥 라인으로, 두께, 스타일, 색상을 조합해 정의합니다.

div {
  border: 2px solid black;
}

구성 속성

속성	설명	예시
border-width	두께	border-width: 3px;
border-style	선 종류	solid, dashed, dotted, double 등
border-color	색상	red, #333, rgb(0,0,0) 등

축약형(Shorthand)

border: 2px dashed blue;

→ 두께 2px, 점선, 파란색 테두리

방향별 테두리 설정

속성	예시	설명
border-top	border-top: 3px solid red;	위쪽 테두리
border-right	border-right: 2px dashed blue;	오른쪽 테두리
border-bottom	border-bottom: 1px dotted gray;	아래쪽 테두리
border-left	border-left: 5px double green;	왼쪽 테두리

---

5. 예시: margin, padding, border의 시각적 차이

<style>
.box {
  background-color: lightyellow;
  border: 3px solid orange;
  padding: 20px;
  margin: 30px;
}
</style>

<div class="box">박스 모델 테스트</div>

설명:

• margin: 다른 요소와의 바깥 간격 (30px)

• border: 주황색 테두리 (3px)

• padding: 콘텐츠와 테두리 사이의 안쪽 간격 (20px)

• background-color: 패딩 영역까지 적용됨 (바깥 margin에는 적용되지 않음)

결과적으로, 이 박스는
내용 → 패딩 → 테두리 → 마진 순으로 공간을 차지합니다.

---

6. margin과 padding의 차이

구분	margin	padding
위치	요소의 바깥쪽	요소의 안쪽
영향 범위	다른 요소와의 간격	콘텐츠와 테두리 간격
배경색 적용	안 됨	됨
요소 크기에 영향	영향 없음(바깥 공간)	영향 있음(요소 자체가 커짐)
겹침 현상	인접한 요소의 margin끼리는 “겹침(collapse)” 가능	padding은 겹치지 않음

예시 비교:

.box1 {
  background: skyblue;
  padding: 20px;
}

.box2 {
  background: pink;
  margin: 20px;
}

• .box1: 내부 여백이 생겨 콘텐츠가 안쪽으로 밀림

• .box2: 바깥 여백이 생겨 주변과 떨어짐

---

7. margin collapse (마진 겹침 현상)

두 개의 요소가 위아래로 배치될 때,
그들의 세로 방향 마진이 합쳐지지 않고, 더 큰 쪽 하나만 적용되는 현상을
margin collapse(마진 겹침)이라 합니다.

예시:

<p style="margin-bottom: 30px;">첫 번째 단락</p>
<p style="margin-top: 20px;">두 번째 단락</p>

첫 번째 단락: 아래쪽 마진 30px

두 번째 단락: 위쪽 마진 20px

결과: 30px만 적용됨 (두 마진이 합쳐지지 않음)

→ 해결하려면 padding, border, 또는 overflow: hidden;을 추가하여 겹침을 방지할 수 있습니다.

---

8. 실제 시각적 비교 예시

<style>
.container {
  background-color: #f2f2f2;
  padding: 10px;
}
.box {
  background-color: #ffd966;
  margin: 15px;
  padding: 10px;
  border: 2px solid #ff9900;
}
</style>

<div class="container">
  <div class="box">첫 번째 박스</div>
  <div class="box">두 번째 박스</div>
</div>

시각적 결과 요약:

• .container: 전체 영역을 감싸는 회색 배경

• .box: 노란색 배경, 주황 테두리

• 각 박스는 margin으로 떨어지고, padding으로 내부 여백을 유지함

---

9. 요약 및 결론

항목	역할	특징
margin	바깥 여백	요소와 요소 간의 거리 조절, 배경색 영향 없음
padding	안쪽 여백	콘텐츠와 테두리 간격 조절, 배경색 적용됨
border	테두리	요소의 경계선, 굵기·색·모양 지정 가능
순서	content → padding → border → margin	안쪽에서 바깥쪽으로 확장

결론:
margin, padding, border는 웹 디자인의 공간 구조를 만드는 핵심 속성입니다.
이 세 가지를 이해하면 박스의 간격, 정렬, 시각적 안정감 등을 자유롭게 조절할 수 있습니다.
즉, 이들은 단순한 여백 조절이 아니라,
“시각적 계층과 레이아웃 흐름을 설계하는 기초 도구”입니다.