CSS / Reference / box-sizing

box-sizing은 width와 height에 padding과 border를 포함할지 정합니다. content-box는 내용 크기에 여백과 테두리를 더하고, border-box는 지정한 크기 안에 여백과 테두리를 포함합니다. margin은 어느 방식에서도 포함되지 않습니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

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

값과 적용 조건은 MDN box-sizing에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 box-sizing-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>box-sizing 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 200px; padding: 20px; border: 5px solid #006c9c; background: #bfe3ff; }
.target { box-sizing: content-box; }
.reference { box-sizing: border-box; }
</style>
</head>
<body>
<main id="demo">
<h1>box-sizing 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">content-box</p><div class="target">width: 200px</div></div><div class="b"><p class="label">border-box</p><div class="reference">width: 200px</div></div></section>
</main>
</body>
</html>

첫 박스의 전체 너비는 200 + 40 + 10 = 250px입니다. 두 번째 박스는 테두리까지 200px이며 내용 너비는 150px가 됩니다.

작은 너비와 내용 공간

border-box에서 padding과 border가 지정한 너비보다 크면 내용 너비가 음수가 되는 대신 최소 0으로 제한되어 전체 박스가 지정값보다 커질 수 있습니다. border-box가 모든 넘침을 자동으로 해결한다고 생각하지 마세요.

전체 적용과 외부 구성 요소

사이트 기본값으로 border-box를 적용하면 퍼센트 너비와 padding을 함께 쓰기 편합니다. 가상 요소도 별도로 포함하고, 외부 위젯이나 오래된 CSS가 content-box를 전제로 하는지 확인하세요. 테이블·폼 요소에는 브라우저 기본 규칙이 있을 수 있으므로 실제 Computed를 확인합니다.

테두리와 여백보다 작은 지정 너비

다음 전체 문서를 css-reference-10630-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>테두리와 여백보다 작은 지정 너비</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.box { width:30px;padding:20px;border:5px solid #006c9c;background:#ffd166; margin-bottom:20px; } .border {box-sizing:border-box;} .content {box-sizing:content-box;}
  </style>
</head>
<body>
<main>
  <h1>테두리와 여백보다 작은 지정 너비</h1>
<p>border-box</p><div class="box border"></div><p>content-box</p><div class="box content"></div>
</main>
</body>
</html>

좌우 padding과 border 합계가 50px이므로 border-box의 내용 너비는 0 아래로 줄지 않고 외곽은 50px이 됩니다. content-box 외곽은 30+40+10=80px입니다. 지정 width와 getBoundingClientRect().width를 비교한 뒤 width만 100px로 바꾸면 각각 100·150px인지 확인하고 30px로 복구합니다.

공통 reset을 쓰려면 *, *::before, *::after에 box-sizing을 적용하는 위치와 영향을 먼저 정합니다. 외부 위젯이 content-box를 전제로 만들었을 수 있어 페이지 전체 변경을 예제의 해결책으로 바로 적용하지 않습니다. 위젯 범위를 제외하거나 해당 선택자에서 원래 값을 복구하고, 너비를 다시 확인하세요.

내용·여백·테두리의 관계를 전체 레이아웃에서 확인하려면 박스 모델과 margin, padding, border 이해하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 border-width입니다.

적용되지 않거나 예상과 다를 때

• width만 보지 말고 개발자 도구 박스 모델의 전체 크기를 비교합니다.
• margin 때문에 밀리는 경우 box-sizing 변경만으로는 해결되지 않습니다.