[CSS] padding과 margin의 차이

📌 padding vs margin 차이점

👉 둘 다 요소의 "여백"을 조절하지만, 적용되는 위치가 다름!
👉 padding → 요소 내부 여백
👉 margin → 요소 바깥 여백

---

✅ 1. 기본 개념

속성	설명	적용 위치
padding	요소의 "안쪽 여백" 조절	요소 내부 (콘텐츠와 테두리 사이)
margin	요소의 "바깥 여백" 조절	요소 외부 (다른 요소와의 간격)

📌 CSS 코드 예제

.box {
    background-color: lightblue;
    padding: 20px;  /* 내부 여백 */
    margin: 30px;   /* 바깥 여백 */
    border: 2px solid black;
}

📌 HTML 코드

<div class="box">This is a box</div>

✔️ padding: 20px; → 내용과 border 사이의 여백
✔️ margin: 30px; → 요소와 다른 요소 간의 거리

---

✅ 2. padding과 margin의 시각적 차이

📌 시각적 설명

+---------------------------+   ← margin (바깥 여백)
|                           |
|  +---------------------+  |   ← border (테두리)
|  |                     |  |
|  |    padding         |  |   ← padding (안쪽 여백)
|  |   +-----------+    |  |   ← content (내용)
|  |   |  내용     |    |  |
|  |   +-----------+    |  |
|  |                     |  |
|  +---------------------+  |
|                           |
+---------------------------+

✔️ padding → border 안쪽 여백
✔️ margin → border 바깥 여백

---

✅ 3. padding과 margin 각각의 예제

📌 1) padding 적용 예제 (내부 여백 조정)

.box {
    background-color: lightblue;
    padding: 20px;
}

✔️ 텍스트와 테두리(border) 사이의 공간이 넓어짐
✔️ 안쪽 여백이 커지면서 요소 자체의 크기가 커질 수 있음

---

📌 2) margin 적용 예제 (외부 여백 조정)

.box {
    background-color: lightblue;
    margin: 20px;
}

✔️ 다른 요소들과의 간격이 커짐
✔️ margin을 설정해도 요소 자체 크기는 변하지 않음

---

✅ 4. padding과 margin 동시에 사용

📌 CSS 코드

.box {
    background-color: lightblue;
    padding: 20px;
    margin: 30px;
}

📌 결과

• padding: 20px; → 내부 여백이 생기면서 내용과 테두리 사이 간격이 늘어남
• margin: 30px; → 박스 바깥쪽 여백이 늘어나면서 다른 요소와의 간격이 넓어짐

---

✅ 5. 네 방향 여백 개별 조정 (top, right, bottom, left)

📌 CSS 코드

.box {
    padding-top: 10px;    /* 위쪽 패딩 */
    padding-right: 15px;  /* 오른쪽 패딩 */
    padding-bottom: 20px; /* 아래쪽 패딩 */
    padding-left: 25px;   /* 왼쪽 패딩 */
}

✔️ 각 방향별로 다른 값 설정 가능!

📌 단축 속성 (padding/margin) 사용 가능!

padding: 10px 15px 20px 25px; /* 위, 오른쪽, 아래, 왼쪽 */

✔️ 값을 네 개 지정하면 시계 방향으로 적용됨 (위 → 오른쪽 → 아래 → 왼쪽)

---

📌 결론

✅ padding → 요소의 내부 여백 (content와 border 사이)
✅ margin → 요소의 외부 여백 (다른 요소와의 간격 조정)
✅ 둘 다 top, right, bottom, left 개별 설정 가능
✅ 요소 크기를 변경하려면 padding, 요소 간 거리 조정을 원하면 margin 사용