Skip to content

Commit 01b98e5

Browse files
jdvivaryangshun
authored andcommitted
Improve an answer to the box model question (yangshun#110)
* Improve an answer to the box model question The question: > What does `* { box-sizing: border-box; }` do? What are its advantages? is actually 2 questions and in my opinion only the first one is answered. I tried to answer the second one, plus I used a reference post from Paul Irish. * Update css-questions.md
1 parent b5a8346 commit 01b98e5

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

questions/css-questions.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,11 @@ The box model has the following rules:
357357
* `box-sizing: border-box` changes how the `width` and `height` of elements are being calculated, `border` and `padding` are also being included in the calculation.
358358
* The `height` of an element is now calculated by the content's `height` + vertical `padding` + vertical `border` width.
359359
* The `width` of an element is now calculated by the content's `width` + horizontal `padding` + horizontal `border` width.
360+
* Taking into account `padding`s and `border`s as part of our box model resonates better with how designers actually imagine content in grids.
361+
362+
###### References
363+
364+
* https://www.paulirish.com/2012/box-sizing-border-box-ftw/
360365

361366
[[] Back to top](#css-questions)
362367

0 commit comments

Comments
 (0)