When coding a website, you may sometimes specify “box-sizing: border-box” in CSS.
Some of you may be using it vaguely, but are unsure if you understand it properly.
This time, we will explain the features and usage of the CSS property box-sizing in an easy-to-understand manner .
Please read to the end!
Table of contents
- What is box-sizing?
- When box-sizing doesn’t work?
- Summary: Specify box-sizing for the whole
What is box-sizing?
CSS box-sizing specifies whether to include padding and border in the width and height of an element .
The initial value is content-box, and it will be specified as “not included” as it is.
If it is not included, when the width of the element is set to 100%, the amount of padding and border will protrude outside.
The total value of the content of the element, padding, and border needs to be adjusted to 100%, which makes it difficult to specify.
A value of border-box specifies inclusion .
When you use box-sizing, you usually want to specify this value.
Another value is inherit. This indicates that the specification of the parent element is inherited.
When box-sizing doesn’t work?
When using box-sizing, it ‘s easier to basically specify it for all elements .
*{
box-sizing: border-box;
}If box-sizing does not work, you may have specified it for individual elements and not managed it well.
Let’s specify the whole and check for spelling mistakes.
Most browsers support box-sizing, so you don’t usually have to worry about it, but it might be a good idea to check if your browser supports it.
Summary: Specify box-sizing for the whole
This time, we have explained the features and usage of the CSS property box-sizing .
I also showed you what to do if it doesn’t work.
I think there were many people who specified it without knowing it.
I hope that this article will be of help to you.
