DEV Community

Cover image for Codecademy - CSS 4: Changing Box Model
Helen Kent
Helen Kent

Posted on • Updated on

Codecademy - CSS 4: Changing Box Model

What i've learnt from the Changing the box model lesson of Codecademy's CSS course.

  • It can be tricky using the box model because there are many different measurements to contend with. You have to add the content + padding + borders etc.

  • The previous box model looks like this:

Original box model

  • You can reset the entire box model in your CSS with this:
* {
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode
  • The code above resets the box model to border-box for all HTML elements. This new box model avoids the dimensional issues that exist in the former box model.
  • In this box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change.
  • This is good because if you change the border width or the padding, the size of the box doesn't change because they're included within it.

  • This is the layout of the new box model.
    Border-box box model

Top comments (0)