Cutup #7 Box-sizing
Today, I would like to talk about Box-sizing CSS property.
The box-sizing CSS property defines how the user agent should calculate the total width and height of an element. - MDN
Values
There are two values in box-sizing property, content-box and border-box (actually, there were three values, but one of the values, padding-box, has been deprecated).
content-box : This is the default value as specified by the CSS standard. The width and height properties include the content (element), but does not include the padding, border or margin. This means we need a little effort to calculate actual (visual) box size of the width or height.
Actual width of the box size = width of the content + padding + borderHeight is the same.
border-box : The width and height properties include the content (element), padding and border, but do not include the margin. Padding and border are inside of the box.
Actual width of the box size = width = width of the content + border + paddingHeight is the same.
I wish the image below will help you understand the difference between content-box and border-box.
And here is the example.
Best practice
Unfortunately, the default value of the box-sizing is content-box, not border-box.
From my experience, border-box has always been working great, but content-box gave me a hard time to get the correct layout values.
Moreover, the border-box value is most used and most popular. So it is recommended to reset box-sizing to border-box like the snippet below unless you have a specific reason to use content-box.
Box-sizing reset with Inheritance
html {
box-sizing: border-box;
}*,
*:before,
*:after {
box-sizing: inherit;
}
There are great articles below, well explained about box-sizing, so please check them out too.
📖 Articles
🕹Example
🎈 That’s all for now
💌 Any questions or feedback
I would love to hear your feedback on how I can make it better for you. Please leave your comments below or through my Twitter.
☕️
Lastly, I would love to share <FrontEnd30 /> where I learned many cool front-end techniques. Big thanks to
for sharing super unique front-end skills with me.
