box-sizing
Determines element size calculation. border-box includes padding/border in width; content-box adds them on top.
Class List
| Class | CSS | Description |
|---|---|---|
bxzbb | box-sizing: border-box | Includes padding and border in width (modern default) |
bxzcb | box-sizing: content-box | Adds padding and border on top of width (legacy default) |
Visual Comparison
Difference with same width: 300px, padding: 20px, border: 4px.
border-box — bxzbb
Total rendered size = 300px
Content area = 300 - 20*2 - 4*2 = 252px
content-box — bxzcb
Content area = 300px
Total rendered size = 300 + 20*2 + 4*2 = 348px
Size Calculation Comparison
width: 300px, padding: 20px, border: 4px basis
| bxzbb (border-box) | bxzcb (content-box) | |
|---|---|---|
| width declaration | 300px | 300px |
| padding (left+right) | 20px * 2 = 40px | 20px * 2 = 40px |
| border (left+right) | 4px * 2 = 8px | 4px * 2 = 8px |
| Content area | 300 - 40 - 8 = 252px | 300px (그대로) |
| Total rendered size | 300px (width 그대로) | 300 + 40 + 8 = 348px |
| Calculation method | width = 콘텐츠 + padding + border | width = 콘텐츠만 |
Practical Examples
Examples showing border-box usefulness for layouts.
<!-- border-box: 100% width + padding fits exactly -->
<div class="bxzbb w100p p2rem bg18181B br8px">
padding is included within width, no parent overflow
</div>
<!-- content-box: 100% width + padding overflows -->
<div class="bxzcb w100p p2rem bg18181B br8px">
padding is added outside width, overflows parent!
</div>
<!-- Convenience of border-box in 2-column layout -->
<div class="df gap2rem">
<div class="bxzbb w50p p2rem b1pxsolid27272A br8px">50% + padding + border = exactly 50%</div>
<div class="bxzbb w50p p2rem b1pxsolid27272A br8px">50% + padding + border = exactly 50%</div>
</div>100% width + padding issue
bxzbb (border-box): padding included in width
bxzcb (content-box): padding added outside width
content-box with width: 100% + padding overflows parent
Usage with Form Elements
Form elements may default to content-box. Apply bxzbb for width: 100% + padding.
<!-- Input field: border-box required -->
<div class="df fdc gap12px maxw40rem">
<input class="bxzbb w100p py8px px16px bg18181B b1pxsolid27272A br4px cFFFFFF"
type="text" placeholder="Name" />
<input class="bxzbb w100p py8px px16px bg18181B b1pxsolid27272A br4px cFFFFFF"
type="email" placeholder="Email" />
<textarea class="bxzbb w100p py8px px16px bg18181B b1pxsolid27272A br4px cFFFFFF"
placeholder="Message"></textarea>
</div>
<!-- bxzbb can be omitted if global reset exists -->
<input class="w100p py8px px16px bg18181B b1pxsolid27272A br4px cFFFFFF"
type="text" placeholder="When reset is applied" />Input field comparison
bxzbb: fits parent width
bxzcb: overflows by padding amount
Tips & Notes
bxzbb is almost always correct
Most CSS resets set global box-sizing: border-box. content-box rarely needed in modern development.
width: 100% + padding combination
With w100p and p2rem, bxzbb must be applied to prevent overflow. Not needed if global reset already includes it.
When content-box is needed
Use bxzcb only for exact content-area control (canvas, specific-size image containers).
Check global reset
Verify *, *::before, *::after { box-sizing: border-box } in global CSS. No need for individual bxzbb if set.