box-sizing

요소의 크기 계산 방식을 결정합니다. border-box는 padding과 border를 width에 포함하고, content-box는 width 위에 추가합니다.

클래스 목록

클래스	CSS	설명
`bxzbb`	box-sizing: border-box	padding과 border를 width에 포함 (현대 기본값)
`bxzcb`	box-sizing: content-box	padding과 border를 width 위에 추가 (레거시 기본값)

시각적 비교

동일한 width: 300px, padding: 20px, border: 4px를 적용했을 때의 차이입니다.

border-box — bxzbb

콘텐츠 영역

전체 렌더링 크기 = 300px

콘텐츠 영역 = 300 - 20*2 - 4*2 = 252px

content-box — bxzcb

콘텐츠 영역

콘텐츠 영역 = 300px

전체 렌더링 크기 = 300 + 20*2 + 4*2 = 348px

크기 계산 비교

width: 300px, padding: 20px, border: 4px 기준

	bxzbb (border-box)	bxzcb (content-box)
width 선언	300px	300px
padding (좌우)	20px * 2 = 40px	20px * 2 = 40px
border (좌우)	4px * 2 = 8px	4px * 2 = 8px
콘텐츠 영역	300 - 40 - 8 = 252px	300px (그대로)
전체 렌더링 크기	300px (width 그대로)	300 + 40 + 8 = 348px
계산 방식	width = 콘텐츠 + padding + border	width = 콘텐츠만

실전 예시

border-box가 레이아웃에서 얼마나 유용한지 보여주는 예시들입니다.

<!-- border-box: 100% 너비 + padding이 정확히 맞음 -->
<div class="bxzbb w100p p2rem bg18181B br8px">
  padding이 width 안에 포함되어 부모를 넘치지 않습니다
</div>

<!-- content-box: 100% 너비 + padding이 넘침 -->
<div class="bxzcb w100p p2rem bg18181B br8px">
  padding이 width 밖에 추가되어 부모를 넘칩니다!
</div>

<!-- 2열 레이아웃에서 border-box의 편리함 -->
<div class="df gap2rem">
  <div class="bxzbb w50p p2rem b1pxsolid27272A br8px">50% + padding + border = 정확히 50%</div>
  <div class="bxzbb w50p p2rem b1pxsolid27272A br8px">50% + padding + border = 정확히 50%</div>
</div>

100% 너비 + padding 문제

bxzbb (border-box): padding이 width 안에 포함

w100p p2rem bxzbb — 부모를 넘치지 않음

bxzcb (content-box): padding이 width 밖에 추가

w100p p2rem bxzcb — 부모를 넘침!

content-box에서 width: 100% + padding을 함께 사용하면 부모 요소를 넘칩니다

폼 요소에서의 활용

input, textarea 등 폼 요소는 기본적으로 content-box인 경우가 있습니다. bxzbb를 적용하면 width: 100%와 padding을 함께 사용할 수 있습니다.

<!-- 입력 필드: border-box 필수 -->
<div class="df fdc gap12px maxw40rem">
  <input class="bxzbb w100p py8px px16px bg18181B b1pxsolid27272A br4px cFFFFFF"
         type="text" placeholder="이름" />
  <input class="bxzbb w100p py8px px16px bg18181B b1pxsolid27272A br4px cFFFFFF"
         type="email" placeholder="이메일" />
  <textarea class="bxzbb w100p py8px px16px bg18181B b1pxsolid27272A br4px cFFFFFF"
            placeholder="메시지"></textarea>
</div>

<!-- 전역 리셋이 있으면 bxzbb 생략 가능 -->
<input class="w100p py8px px16px bg18181B b1pxsolid27272A br4px cFFFFFF"
       type="text" placeholder="리셋이 적용된 경우" />

입력 필드 비교

bxzbb: 부모 너비에 맞음

bxzcb: padding만큼 넘침

팁 & 주의사항

bxzbb가 거의 항상 정답

대부분의 CSS 리셋(Normalize, Reset)은 전역에 box-sizing: border-box를 설정합니다. 현대 웹 개발에서 content-box를 사용할 일은 거의 없습니다.

width: 100% + padding 조합

w100p와 p2rem을 함께 사용할 때, bxzbb가 적용되어 있어야 부모 영역을 넘치지 않습니다. 전역 리셋에서 이미 설정되어 있다면 별도로 추가할 필요가 없습니다.

content-box가 필요한 경우

콘텐츠 영역의 크기를 정확히 제어해야 하는 특수한 경우(예: 캔버스, 특정 크기의 이미지 컨테이너)에만 bxzcb를 사용합니다.

전역 리셋 확인

프로젝트의 global.css나 리셋 파일에서 *, *::before, *::after { box-sizing: border-box }가 설정되어 있는지 확인하세요. 이미 설정되어 있다면 개별 요소에 bxzbb를 추가할 필요가 없습니다.

width height padding border margin