실행 가능한 CSS 문서: padding과 margin 차이

Q: padding과 margin 중 무엇이 요소 크기를 키우나요?

기본값 box-sizing: content-box에서는 padding이 키워요. 너비와 높이에 더해져요. margin은 요소 크기에 절대 더해지지 않고 둘레에 공간을 더해요(width: auto인 블록은 margin이 사용 가능한 너비 일부를 가져가서 오히려 좁아져요). box-sizing: border-box에서는 padding을 너비 안쪽에서 가져가요.

그림 하나로 보는 차이

padding은 테두리 안쪽이고, margin은 바깥쪽이에요. 아래 두 상자는 콘텐츠도 같고 값도 똑같이 24px이에요. 속성만 달라요. 회색은 뒤에 있는 컨테이너예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

padding에서는 24px이 파란색이에요. 상자의 일부이고, 테두리 안쪽에 있고, 상자가 커져요. margin에서는 24px이 회색이에요. 상자는 텍스트에 딱 맞게 유지되고 바깥 공간이 컨테이너의 가장자리를 밀어내요.

한 상자에서 둘 다 해 보기

슬라이더 두 개를 움직여 보세요. padding은 파란 상자를 키우고, margin은 상자를 바꾸지 않고 회색 가장자리에서 떼어 놓아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

크기 줄을 보세요. padding 슬라이더를 움직이면 바뀌고, margin 슬라이더를 움직이면 그대로예요.

한눈에 보는 margin과 padding

	Padding	Margin
위치	테두리 안쪽	테두리 바깥쪽
배경	요소의 배경이 보여요	항상 투명해요
클릭 영역에 포함	돼요	안 돼요
요소 크기에 더해짐	`content-box`에서는 돼요	안 돼요
`auto` 가능	안 돼요	돼요(`margin: 0 auto`로 가운데 정렬)
음수 가능	안 돼요	돼요
세로 값 상쇄	절대 안 돼요	돼요, 인접한 세로 margin은 상쇄돼요
퍼센트 기준	포함 블록의 너비	포함 블록의 너비
주로 쓰는 곳	버튼, 카드, 입력 요소 안쪽 공간	요소 사이 공간, 가운데 정렬

각 속성의 자세한 내용은 따로 있어요. CSS padding과 CSS margin을 보세요.

무엇을 써야 할까

질문 하나만 하세요. 그 공간이 요소에 속하나요, 요소 사이에 있나요?

버튼 레이블 둘레의 여유, 카드 안쪽, 입력 요소의 텍스트와 테두리 사이 공간: padding. 배경을 가져가고 대상을 키워요.
두 문단 사이, 카드 사이, 섹션 둘레의 공간: margin, 또는 부모가 flex나 grid 컨테이너라면 gap.

선택이 가장 중요한 곳은 클릭 영역이에요. 아래 두 링크는 페이지에서 같은 자리를 차지하지만, 첫 번째 링크의 공간은 padding이고 두 번째는 margin이에요. 누르기 쉬운 건 첫 번째뿐이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

주황색 점선 외곽선이 요소의 가장자리이고, 클릭과 탭에 반응하는 영역이에요. 두 번째 링크 둘레의 margin은 아무 일도 하지 않는 빈 공간이에요.

항목 사이 간격: margin 또는 gap

항목이 한 줄이나 격자로 늘어설 때는 자식마다 margin을 주는 것보다 flex나 grid 부모에 gap을 주는 게 보통 더 깔끔해요. 항목 사이에만 들어가고 첫 항목 앞이나 마지막 항목 뒤에는 들어가지 않아서 되돌릴 게 없어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

여기서 회색 컨테이너는 padding(안쪽 공간, 회색)을, 항목은 padding(각각의 안쪽 공간, 초록색)을 쓰고, 항목 사이 공간은 gap이 맡아요.

자주 하는 실수

색이 있어야 하는 공간에 margin 쓰기. margin은 투명해요. 배경이 보여야 하는 공간이라면 padding이에요.
링크를 키우려고 margin 쓰기. 클릭 영역은 테두리에서 끝나요. padding을 쓰세요.
20px 세로 margin 두 개가 40px이 될 거라고 기대하기. 인접한 세로 margin은 20px로 상쇄돼요. padding은 절대 상쇄되지 않아요.
가운데 정렬하려고 padding: auto 시도하기. auto를 받는 건 margin뿐이에요.
padding이 상자를 키운다는 걸 잊기. box-sizing: border-box를 추가해서 width에 padding이 포함되게 하세요.

자주 묻는 질문

margin과 padding은 무엇이 다른가요?

padding은 요소 안쪽, 콘텐츠와 테두리 사이의 공간이에요. margin은 테두리 바깥, 요소와 이웃 사이의 공간이에요. padding에는 요소의 배경이 보이고, margin은 항상 투명해요.

margin 대신 padding은 언제 써야 하나요?

요소에 속한 공간에는 padding을 써요. 버튼 글자 둘레의 여유, 카드 안쪽, 배경을 공유하거나 클릭할 수 있어야 하는 모든 공간이에요. 서로 다른 요소 사이의 공간에는 margin(또는 flex와 grid의 gap)을 쓰세요.

padding과 margin 중 무엇이 요소 크기를 키우나요?

기본값 box-sizing: content-box에서는 padding이 키워요. 너비와 높이에 더해져요. margin은 요소 크기에 절대 더해지지 않고 둘레에 공간을 더해요(width: auto인 블록은 margin이 사용 가능한 너비 일부를 가져가서 오히려 좁아져요). box-sizing: border-box에서는 padding을 너비 안쪽에서 가져가요.

padding도 margin처럼 음수가 될 수 있나요?

없어요. 음수 padding은 잘못된 값이라 무시되지만, 음수 margin은 허용되고 요소를 겹치게 만들 수 있어요. padding은 auto도 될 수 없어서 가운데 정렬에는 margin: 0 auto를 써요.