5. Padding과 Margin

Jan 07, 2026

Contents

1. Padding과 Margin 1️⃣ padding (안쪽 여백)2️⃣ Margin (바깥 여백)3️⃣ 방향별 속성 4️⃣ margin collapse (마진 겹침)5️⃣ margin: auto 6️⃣ box-sizing과의 관계 7️⃣ 언제 padding? 언제 margin?

1. Padding과 Margin

1️⃣ padding (안쪽 여백)

1) 개념

콘텐츠와 테두리 사이의 공간

요소의 크기를 키운다


.box {
	padding:20px;
}

2) 특징

배경색(background-color)이 padding 영역까지 채워짐

버튼, 카드, 입력창에서 매우 중요

클릭 영역이 넓어짐 (UX 향상)


button {
	padding:12px20px;
}

3) 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        height: 200px;
      }

      .box1 {
        padding: 50px 10px 50px 10px; /* 박스 안의 여백(위 오른쪽 아래 왼쪽) */
      }

      .box2 {
        padding: 10px 50px; /* 2개만 적으면 -> 세로 가로 */
      }
    </style>
  </head>
  <body>
    <h1>Padding(안에서), Margin(밖에서)</h1>
    <hr />
    <div class="box1">
      <div></div>
    </div>
    <br />
    <div class="box2">
      <div></div>
    </div>
  </body>
</html>

2️⃣ Margin (바깥 여백)

1) 개념

요소와 요소 사이의 거리

요소 외부 공간


.box {
	margin:20px;
}

2) 특징

배경색이 적용되지 않음

레이아웃 간격 조절용

음수 값 가능


.box {
	margin-top: -10px;
}

3) 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        height: 200px;
      }

      .box1 {
        padding: 50px 10px 50px 10px; /* 박스 안의 여백(위 오른쪽 아래 왼쪽) */
      }

      .box2 {
        margin-top: 30px; /* 주고싶은 방향에 top, bottom, right, left 선택 */
        padding: 10px 50px; /* 2개만 적으면 -> 세로 가로 */
      }
    </style>
  </head>
  <body>
    <h1>Padding(안에서), Margin(밖에서)</h1>
    <hr />
    <div class="box1">
      <div></div>
    </div>
    <div class="box2">
      <div></div>
    </div>
  </body>
</html>

3️⃣ 방향별 속성

1) 공통 사용법


padding: 10px;                 /* 상 | 하 | 좌 | 우 */
padding: 10px 20px;            /* 상하 | 좌우 */
padding: 10px 20px 30px;       /* 상 | 좌우 | 하 */
padding: 10px 20px 30px 40px;  /* 상 | 우 | 하 | 좌 */


margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

➡️ 순서 암기: 시계 방향 (상 → 우 → 하 → 좌)

4️⃣ margin collapse (마진 겹침)

⚠️ 중요한 개념

세로 방향 마진만 겹침

더 큰 값 하나만 적용됨


<div class="a"></div>
<div class="b"></div>


.a {margin-bottom: 30px; }
.b {margin-top: 20px; }

➡️ 실제 간격은 30px

❌ padding, border가 있으면 겹침 발생 안 함

❌ 좌우 마진은 겹치지 않음

5️⃣ margin: auto

가운데 정렬의 핵심


.box {
	width:300px;
	margin:0 auto;
}

좌우 여백을 자동 계산

블록 요소를 가운데 정렬

⚠️ width가 없으면 동작 안 함

6️⃣ box-sizing과의 관계

1) 기본값 (content-box)


.box {
	width:200px;
	padding:20px;
}

➡️ 실제 크기 = 240px

2) border-box (실무 필수)


.box {
	box-sizing: border-box;
}

➡️ padding, border 포함해서 width 유지

💡 실무에서는 거의 항상:


* {
	box-sizing: border-box;
}

7️⃣ 언제 padding? 언제 margin?

1) padding 사용

버튼 안 여백

카드 내부 공간

클릭 영역 확대

배경색이 있는 공간

2) margin 사용

요소 간 간격

섹션 간 거리

레이아웃 정렬

Contents

CSS

5. Padding과 Margin

박은서

Jan 07, 2026

Contents

1. Padding과 Margin

1️⃣ padding (안쪽 여백)

1) 개념

콘텐츠와 테두리 사이의 공간

요소의 크기를 키운다


.box {
	padding:20px;
}

2) 특징

배경색(background-color)이 padding 영역까지 채워짐

버튼, 카드, 입력창에서 매우 중요

클릭 영역이 넓어짐 (UX 향상)


button {
	padding:12px20px;
}

3) 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        height: 200px;
      }

      .box1 {
        padding: 50px 10px 50px 10px; /* 박스 안의 여백(위 오른쪽 아래 왼쪽) */
      }

      .box2 {
        padding: 10px 50px; /* 2개만 적으면 -> 세로 가로 */
      }
    </style>
  </head>
  <body>
    <h1>Padding(안에서), Margin(밖에서)</h1>
    <hr />
    <div class="box1">
      <div></div>
    </div>
    <br />
    <div class="box2">
      <div></div>
    </div>
  </body>
</html>

2️⃣ Margin (바깥 여백)

1) 개념

요소와 요소 사이의 거리

요소 외부 공간


.box {
	margin:20px;
}

2) 특징

배경색이 적용되지 않음

레이아웃 간격 조절용

음수 값 가능


.box {
	margin-top: -10px;
}

3) 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        height: 200px;
      }

      .box1 {
        padding: 50px 10px 50px 10px; /* 박스 안의 여백(위 오른쪽 아래 왼쪽) */
      }

      .box2 {
        margin-top: 30px; /* 주고싶은 방향에 top, bottom, right, left 선택 */
        padding: 10px 50px; /* 2개만 적으면 -> 세로 가로 */
      }
    </style>
  </head>
  <body>
    <h1>Padding(안에서), Margin(밖에서)</h1>
    <hr />
    <div class="box1">
      <div></div>
    </div>
    <div class="box2">
      <div></div>
    </div>
  </body>
</html>

3️⃣ 방향별 속성

1) 공통 사용법


padding: 10px;                 /* 상 | 하 | 좌 | 우 */
padding: 10px 20px;            /* 상하 | 좌우 */
padding: 10px 20px 30px;       /* 상 | 좌우 | 하 */
padding: 10px 20px 30px 40px;  /* 상 | 우 | 하 | 좌 */


margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

➡️ 순서 암기: 시계 방향 (상 → 우 → 하 → 좌)

4️⃣ margin collapse (마진 겹침)

⚠️ 중요한 개념

세로 방향 마진만 겹침

더 큰 값 하나만 적용됨


<div class="a"></div>
<div class="b"></div>


.a {margin-bottom: 30px; }
.b {margin-top: 20px; }

➡️ 실제 간격은 30px

❌ padding, border가 있으면 겹침 발생 안 함

❌ 좌우 마진은 겹치지 않음

5️⃣ margin: auto

가운데 정렬의 핵심


.box {
	width:300px;
	margin:0 auto;
}

좌우 여백을 자동 계산

블록 요소를 가운데 정렬

⚠️ width가 없으면 동작 안 함

6️⃣ box-sizing과의 관계

1) 기본값 (content-box)


.box {
	width:200px;
	padding:20px;
}

➡️ 실제 크기 = 240px

2) border-box (실무 필수)


.box {
	box-sizing: border-box;
}

➡️ padding, border 포함해서 width 유지

💡 실무에서는 거의 항상:


* {
	box-sizing: border-box;
}

7️⃣ 언제 padding? 언제 margin?

1) padding 사용

버튼 안 여백

카드 내부 공간

클릭 영역 확대

배경색이 있는 공간

2) margin 사용

요소 간 간격

섹션 간 거리

레이아웃 정렬

Contents