실행 가능한 CSS 문서: 박스 모델

Q: box-sizing: border-box는 무엇을 하나요?

width와 height에 padding과 border를 포함시켜요. width: 200px에 padding: 20px, 5px 테두리를 준 상자는 정확히 200px 너비가 되고, 콘텐츠 영역이 150px로 줄어들어요. 기본값인 content-box는 padding과 border를 위에 더해서 250px이 돼요.

Q: 요소의 전체 너비는 어떻게 계산하나요?

기본값 content-box에서는 width + 좌우 padding + 좌우 border예요. border-box에서는 그냥 width예요. 두 경우 모두 margin은 상자 바깥이라서, 요소 자체의 너비가 아니라 요소가 차지하는 공간에 더해져요.

Q: 모든 요소에 box-sizing: border-box를 지정해야 하나요?

대부분의 프로젝트가 스타일시트 맨 위에 , ::before, *::after { box-sizing: border-box; }로 그렇게 해요. 퍼센트 너비와 padding이 기대한 대로 더해지고, Bootstrap이나 Tailwind 같은 프레임워크도 같은 리셋을 포함해요.

모든 상자의 네 겹

페이지의 모든 요소는 안쪽부터 바깥쪽으로 네 겹으로 된 직사각형으로 그려져요.

Content: 텍스트, 이미지, 자식 요소예요. 크기는 width와 height로 정해요.
Padding: 상자 안쪽, 콘텐츠와 테두리 사이의 공간이에요. 요소의 배경이 보여요.
Border: padding 둘레의 선이에요.
Margin: 테두리 바깥에서 다른 상자를 밀어내는 공간이에요. 항상 투명해요.

예제에서는 층마다 색이 달라요. 파란색 content, 초록색 padding, 어두운 border, 그리고 상자 둘레의 주황색 영역이 margin이에요(margin 자체는 투명해서 감싸는 요소로 그렸어요).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

상자 아래 줄은 브라우저가 측정한 값이에요. 160 + 20 + 20 + 10 + 10 = 220px. margin은 양쪽에 24px씩 더하지만 상자 바깥이라서 220에는 들어가지 않아요.

너비 계산: content-box와 border-box

기본값(box-sizing: content-box)에서 width는 콘텐츠만 정해요. padding과 border는 그 위에 더해져서 상자가 적은 숫자보다 넓어져요. box-sizing: border-box에서는 width가 상자 전체이고, padding과 border가 들어갈 자리만큼 콘텐츠가 줄어들어요.

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

	`content-box` (기본값)	`border-box`
`width`의 뜻	콘텐츠	콘텐츠 + padding + border
`width: 200px; padding: 20px; border: 5px`	너비 250px	너비 200px
이때 콘텐츠 영역	200px	150px
Margin	바깥, 포함 안 됨	바깥, 포함 안 됨

border-box 리셋

border-box를 쓰면 크기가 맞아떨어지기 때문에 거의 모든 최신 스타일시트가 이 규칙으로 시작해요.

*,
*::before,
*::after {
  box-sizing: border-box;
}

퍼센트에서 가장 중요해요. padding이 있는 width: 50% 열 두 개는 content-box에서 한 줄에 들어가지 않아요. 각각이 50%에 padding을 더한 크기이기 때문이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(HTML 주석은 inline-block 열 사이의 공백을 없애요. 그대로 두면 몇 픽셀이 더해져요.)

DevTools에서 박스 모델 보기

모든 브라우저가 박스 모델을 그려 줘요. 요소를 오른쪽 클릭하고 검사를 고른 다음 Computed 탭(Firefox는 Layout)을 여세요. 가운데에 콘텐츠 크기가 있고 그 둘레에 padding, border, margin 값이 있는 다이어그램이 보여요. Elements 패널에서 요소에 마우스를 올려도 페이지에 색이 입혀져요. 콘텐츠는 파란색, padding은 초록색, margin은 주황색이에요.

인라인 상자는 규칙이 달라요

위의 박스 모델은 <div>, <p> 같은 블록 상자를 설명해요. <span>, <a>, <strong> 같은 인라인 요소는 텍스트 줄 안에서 줄바꿈되고, 세로 공간을 다르게 다뤄요.

속성	인라인 요소에서
`width`, `height`	무시돼요
가로 padding, border, margin	적용되고, 옆 요소를 옆으로 밀어요
세로 padding과 border	그려지지만 위아래 줄을 밀지 않아요
세로 margin	무시돼요

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block은 줄 안의 요소에 완전한 박스 모델을 줘요. 너비, 높이, padding, margin이 모두 공간을 차지해요. 각 층의 자세한 내용은 CSS padding과 CSS margin을 보세요.

자주 하는 실수

고정 너비 상자에 padding을 넣고 왜 커졌는지 궁금해하기. content-box에서는 padding과 border가 width에 더해져요. border-box를 쓰세요.
margin에 배경색이 칠해질 거라고 기대하기. margin은 항상 투명해요. 색이 있는 공간에는 padding을 쓰세요.
인라인 요소에 height나 세로 margin 지정하기. 아무 일도 일어나지 않아요. display: inline-block이나 block을 쓰세요.
계산에서 테두리 빠뜨리기. width: 100% 요소에 1px 테두리를 주면 content-box에서 2px 넓어지고, 가로 스크롤바가 생길 수 있어요.
margin과 padding 헷갈리기. 짧게 말하면 padding은 테두리 안쪽, margin은 바깥쪽이에요. margin과 padding 차이 페이지에서 나란히 비교해요.

자주 묻는 질문

CSS 박스 모델이란 무엇인가요?

모든 요소가 네 겹의 직사각형 상자로 렌더링된다는 규칙이에요. 콘텐츠, 그 둘레의 padding, padding 둘레의 border, border 바깥의 margin이에요. CSS의 너비, 높이, 간격은 모두 이 층들에 지정해요.

box-sizing: border-box는 무엇을 하나요?

width와 height에 padding과 border를 포함시켜요. width: 200px에 padding: 20px, 5px 테두리를 준 상자는 정확히 200px 너비가 되고, 콘텐츠 영역이 150px로 줄어들어요. 기본값인 content-box는 padding과 border를 위에 더해서 250px이 돼요.

요소의 전체 너비는 어떻게 계산하나요?

기본값 content-box에서는 width + 좌우 padding + 좌우 border예요. border-box에서는 그냥 width예요. 두 경우 모두 margin은 상자 바깥이라서, 요소 자체의 너비가 아니라 요소가 차지하는 공간에 더해져요.

margin도 박스 모델에 포함되나요?

네, 가장 바깥층이에요. 하지만 항상 투명하고 요소 자체의 너비나 배경에는 절대 포함되지 않아요. 이웃한 상자를 밀어낼 뿐이에요.

모든 요소에 box-sizing: border-box를 지정해야 하나요?

대부분의 프로젝트가 스타일시트 맨 위에 *, *::before, *::after { box-sizing: border-box; }로 그렇게 해요. 퍼센트 너비와 padding이 기대한 대로 더해지고, Bootstrap이나 Tailwind 같은 프레임워크도 같은 리셋을 포함해요.