Skip to Content
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.

Folder Icon

Take this course for free

Already have an account?