andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update box sizing reset

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 12:23:58 +03:00
parent d68c0de76f
commit 197e1e2de1
1 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
snippets/box-sizing-reset.md
View File

@ -3,7 +3,7 @@ title: Box-sizing reset
tags: layout,beginner tags: layout,beginner
--- ---
Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`. Resets the box-model so that `width` and `height` are not affected by `border` or `padding`.
```html ```html
<div class="box">border-box</div> <div class="box">border-box</div>
@ -11,24 +11,25 @@ Resets the box-model so that `width`s and `height`s are not affected by their `b
``` ```
```css ```css
html { div {
box-sizing: border-box; box-sizing: border-box;
} }
*, *,
*::before, *:before,
*::after { *:after {
box-sizing: inherit; box-sizing: inherit;
} }
.box { .box {
display: inline-block; display: inline-block;
width: 150px; width: 120px;
height: 150px; height: 120px;
padding: 10px; padding: 8px;
background: tomato; background: #F24333;
color: white; color: white;
border: 10px solid red; border: 1px solid #BA1B1D;
border-radius: 4px;
} }
.content-box { .content-box {
@ -42,5 +43,3 @@ html {
2. `box-sizing: inherit` makes an element respect its parent's `box-sizing` rule. 2. `box-sizing: inherit` makes an element respect its parent's `box-sizing` rule.
#### Browser support #### Browser support
- https://caniuse.com/#feat=css3-boxsizing