CSS Box Sizing Property
This property changes the calculation for measuring the width of elements.
The default box model (content-box) can be counter-intuitive, since the width / height for an element will not represent its actual width or height on screen as soon as you start adding padding and border styles to the elements.
The following example demonstrates this potential issue with content-box -
Example -
|
textarea {
width: 100%;
padding: 3px;
box-sizing: content-box; /* default value */
}
|
Since the padding will be added to the width of the textarea, the resulting element is a textarea that is wider than 100%.
Fortunately, CSS allows us to change the box model with the box-sizing property for an element.
There are three different values for the property available -
Hence when you set the height it appears a bit bigger not the exact height or width you expected.
To solve that problem we use Box-sizing property -
Now Fortunately, CSS allows us to change the box model with the box-sizing property for an element. There are three different values for the property available
One of them is - border-box -
Syntax -
box-sizing : border-box;
Width and height includes the content, the padding as well as the border.
Example -
Output -
