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:
- You can reset the entire box model in your CSS with this:
* {
box-sizing: border-box;
}
- 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.
Top comments (0)