Learn
Changing the Box Model
The New Box Model
Now that you know about the new box model, let’s actually implement it in the browser.
* { box-sizing: border-box; }
It’s that simple! In the example above, the universal selector (*
) targets all elements on the web page and sets their box model to the border-box
model.
Instructions
1.
In style.css, change the box model for all elements on the web page to the new box model.
You probably didn’t see a difference in the web page to the right - that’s ok! The new box model simply makes sure that the dimensions of elements remains the same regardless of border width and padding.