You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Copy file name to clipboardExpand all lines: questions/css-questions.md
+5Lines changed: 5 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -357,6 +357,11 @@ The box model has the following rules:
357
357
*`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.
358
358
* The `height` of an element is now calculated by the content's `height` + vertical `padding` + vertical `border` width.
359
359
* 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.
0 commit comments