실행 가능한 CSS 문서: CSS padding

Q: padding 단축 속성의 값 순서는 어떻게 되나요?

위에서부터 시계 방향이에요. padding: top right bottom left; 값이 세 개면 위, 좌우, 아래이고, 두 개면 위아래 그다음 좌우, 하나면 네 방향 모두예요.

Q: padding을 주면 요소 크기가 커지나요?

기본값 box-sizing: content-box에서는 커져요. padding이 width와 height에 더해져요. box-sizing: border-box에서는 padding을 너비 안쪽에서 가져가서 요소가 지정한 크기를 유지해요.

Q: 퍼센트 padding은 무엇을 기준으로 하나요?

네 방향 모두 포함 블록의 너비가 기준이에요. padding-top: 50%는 부모 높이가 아니라 너비의 절반이에요. 예전 가로세로 비율 트릭이 세로 padding을 쓴 이유예요.

Q: HTML에서 padding은 어떻게 넣나요?

스타일시트나 style 속성에서 CSS로 넣어요. HTML에는 일반 요소용 padding 속성이 없어요. 표의 옛 cellpadding 속성은 폐기되었고 td와 th의 padding으로 대체됐어요.

padding이란

padding은 요소 안쪽, 콘텐츠와 테두리 사이의 공간이에요. 요소의 배경을 가져가기 때문에 버튼, 카드, 배지에 숨 쉴 공간을 주는 속성이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

파란 영역이 콘텐츠예요. 그 둘레의 초록 띠가 사방 24px의 padding이고, 테두리는 그 바깥에 있어요.

padding 단축 속성: 값 1, 2, 3, 4개

padding은 선언 하나로 네 방향을 모두 지정해요. 값의 개수에 따라 어느 방향이 어떤 값을 받는지가 정해지고, 위에서부터 시계 방향으로 돌아요.

선언	위	오른쪽	아래	왼쪽
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

값 두 개는 "세로, 가로"예요. 값 세 개는 "위, 가로, 아래"예요. 네 개는 시계 방향으로 돌아요. 위, 오른쪽, 아래, 왼쪽(영어권에서는 TRouBLe로 외워요).

아래에 아무 단축 속성이나 입력해 보세요. 상자가 다시 그려지고 브라우저가 각 방향이 받은 값을 알려 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

8px, 8px 24px, 0 0 40px, 1em 5%를 입력해 보세요. -10px 같은 잘못된 값은 무시되고 상자는 마지막으로 유효했던 padding을 유지해요.

한 방향씩

방향마다 자기 속성이 있어요. 하나만 바꾸고 싶을 때는 값 네 개짜리 단축 속성보다 더 알아보기 쉬워요.

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

단축 속성 뒤에 한 방향을 적는 건 흔한 패턴이에요. 전부 지정한 다음 한 방향만 조정해요.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

여기서는 순서가 중요해요. padding-bottom 뒤에 padding 단축 속성을 쓰면 아래쪽이 다시 16px로 돌아가요.

논리적 padding: padding-inline과 padding-block

padding-left와 padding-right는 물리적 속성이라 어떤 언어에서든 같은 쪽에 남아요. 논리적 속성은 대신 글쓰기 방향을 따라요. 오른쪽에서 왼쪽으로도 보여 주는 사이트라면 이게 필요해요.

논리적 속성	영어(왼쪽에서 오른쪽)	아랍어(오른쪽에서 왼쪽)
`padding-inline-start`	왼쪽	오른쪽
`padding-inline-end`	오른쪽	왼쪽
`padding-inline`	왼쪽과 오른쪽	오른쪽과 왼쪽
`padding-block`	위와 아래	위와 아래

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

padding은 상자를 키워요 (border-box가 아니면)

기본적으로 width는 콘텐츠만의 너비이고, padding은 그 위에 더해져요. width: 200px에 padding: 20px인 상자는 너비가 240px이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box는 상자를 200px로 유지하고 padding을 안쪽에서 가져가요. 전체 계산은 박스 모델 페이지에서 다뤄요.

퍼센트 padding

퍼센트 padding은 위와 아래를 포함한 네 방향 모두 부모의 너비를 기준으로 계산돼요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

16:9 영상 상자를 만드는 옛 "padding-top: 56.25%" 트릭이 여기서 나왔어요. 지금은 aspect-ratio: 16 / 9가 같은 일을 직접 해 줘요.

버튼과 링크의 padding

링크나 버튼을 키우는 올바른 방법은 padding이에요. padding은 요소의 일부라서 클릭하거나 탭할 수 있는 영역에 포함되기 때문이에요. margin은 공간은 더하지만 대상을 키우지는 않아요.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

padding이 받는 값

값	예시	설명
길이	`12px`, `1rem`, `0.5em`	`em`은 요소의 글자 크기에 맞춰 변해요
퍼센트	`5%`	포함 블록 너비 기준
`0`	`padding: 0`	단위가 필요 없어요
음수	`-10px`	잘못된 값, 무시돼요
`auto`	`auto`	padding에는 잘못된 값이에요(margin에서는 동작해요)

자주 하는 실수

값 네 개 단축 속성의 순서 오류. 위, 오른쪽, 아래, 왼쪽, 시계 방향이에요.
padding을 넣으면 커지는 상자. box-sizing: border-box를 지정하세요.
두 요소를 떼어 놓는 데 padding 쓰기. 요소 사이의 공간은 margin이고, padding은 한 요소 안의 공간이에요. margin과 padding 차이를 보세요.
인라인 링크의 세로 padding이 다른 줄과 겹치기. inline-block으로 만드세요.
음수 padding이나 padding: auto. 둘 다 잘못된 값이라 조용히 무시돼요.

자주 묻는 질문

CSS에서 padding이란 무엇인가요?

요소의 콘텐츠와 테두리 사이의 공간이에요. 요소의 일부라서 요소의 배경색이 보이고, 링크나 버튼의 클릭 영역을 넓혀 줘요.

padding 단축 속성의 값 순서는 어떻게 되나요?

위에서부터 시계 방향이에요. padding: top right bottom left; 값이 세 개면 위, 좌우, 아래이고, 두 개면 위아래 그다음 좌우, 하나면 네 방향 모두예요.

padding을 주면 요소 크기가 커지나요?

기본값 box-sizing: content-box에서는 커져요. padding이 width와 height에 더해져요. box-sizing: border-box에서는 padding을 너비 안쪽에서 가져가서 요소가 지정한 크기를 유지해요.

퍼센트 padding은 무엇을 기준으로 하나요?

네 방향 모두 포함 블록의 너비가 기준이에요. padding-top: 50%는 부모 높이가 아니라 너비의 절반이에요. 예전 가로세로 비율 트릭이 세로 padding을 쓴 이유예요.

padding에 음수 값을 쓸 수 있나요?

없어요. 음수 padding 값은 잘못된 값이라 선언이 무시돼요. 콘텐츠를 바깥쪽으로 당기려면 대신 음수 margin을 쓰세요.

HTML에서 padding은 어떻게 넣나요?

스타일시트나 style 속성에서 CSS로 넣어요. <div style="padding: 16px;"> HTML에는 일반 요소용 padding 속성이 없어요. 표의 옛 cellpadding 속성은 폐기되었고 td와 th의 padding으로 대체됐어요.