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.



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.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?