CSS3 box size

Browser support

The number in the table represents the version number of the first browser that supports the property.

Immediately after the number. -webkit- or -moz- specifies the prefix for the browser.

Do not use the CSS3 box-sizing attribute

By default, the width and height of an element are calculated as follows:

Width + padding + border = actual width of the element

Height + padding + border = actual height of the element

This means that when we set the width/height of the element, the actual height and width of the element will be larger (because the border and innermargin of the element will also be calculated in the width/height).

This is a smaller box (width is 300px, height is 100px).

This is a larger box (width is 300px, height is 100px).

The above two <div> although the width of the element is the same as the height setting, the actual size of the display is not the same because the div2 inner margin is specified:

Example

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

In this way, if you want to get the smaller box and include the inner margin, you have to consider the width of the border and the inner margin.

CSS3’s box-sizing attributes solve this problem very well.

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;
}