30-seconds-of-code/snippets/box-sizing-reset.md

Clearfix

Resets the box-model so that widths and heights are not affected by their borders and/or padding.

CSS

.html {
  box-sizing: border-box;
}

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

Demo

Demo

<style> .box-sizing-reset { box-sizing: border-box; width: 200px; padding: 1.5em; color: #000; font-family: sans-serif; background-color: #ccc; border: 5px solid; } </style>

Explanation

1. box-sizing: border-box makes the addition of padding or borders not affect an elements width and/or height.
2. box-sizing: inherit makes an element respect its parents box-sizing rule.

Browser support

✅ No caveats.

• https://caniuse.com/#feat=css3-boxsizing