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

Box-sizing reset

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

CSS

html {
  box-sizing: border-box;
}

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

Demo

Demo

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

Explanation

1. box-sizing: border-box makes the addition of padding or borders not affect an element's width or height.
2. box-sizing: inherit makes an element respect its parent's box-sizing rule.

Browser support

✅ No caveats.

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