8.19. CSS3 box size

8.19.3. Use the CSS3 box-sizing property ¶

CSS3 box-sizing attribute in an element’s width and height Contains padding (inner margin) and border .

If set on the element box-sizing: border-box; then padding and borderare also included in the width and height :

The two div are now the same size!

Rookie tutorial!

Here are two < div > elements to add box-sizing: border-box; a simple instance of the property.

Example

.div1{
    width:300px;
    height:100px;
    border:1px solid blue;
    box-sizing:border-box;
}
.div2{
    width:300px;
    height:100px;
    padding:50px;
    border:1px solid red;
    box-sizing:border-box;
}

From the result point of view box-sizing: border-box; the effect is better, which is exactly what many developers need.

The following code allows all elements to display the size in a more intuitive way. Many browsers already support box-sizing: border-box; (but not all.-that’s why. input and text the width after the element is set to width: 100%; is not the same.

All elements use the box-sizing is more recommended:

Example

\*{
    box-sizing:border-box;
}