Box-sizing reset
Resets the box-model so that width
and height
are not affected by border
or padding
.
- Use
box-sizing: border-box
to include the width and height ofpadding
andborder
when calculating the element'swidth
andheight
. - Use
box-sizing: inherit
to pass down thebox-sizing
property from parent to child elements.
<div class="box">border-box</div> <div class="box content-box">content-box</div>
div { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } .box { display: inline-block; width: 120px; height: 120px; padding: 8px; margin: 8px; background: #F24333; color: white; border: 1px solid #BA1B1D; border-radius: 4px; } .content-box { box-sizing: content-box; }