diff --git a/snippets/box-sizing-reset.md b/snippets/box-sizing-reset.md new file mode 100644 index 000000000..a0ced7618 --- /dev/null +++ b/snippets/box-sizing-reset.md @@ -0,0 +1,46 @@ +### Box-sizing reset + +Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`. + +#### CSS + +```css +.html { + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} +``` + +#### Demo + +
+
Demo
+
+ + + +#### Explanation + +1. `box-sizing: border-box` makes the addition of `padding` or `border`s 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