Files
30-seconds-of-code/snippets/box-sizing-reset.md
2018-03-03 15:05:35 +10:00

910 B

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.