Latest web development tutorials

CSS3 box size

CSS3 box-sizing property to set the width and height attributes contains padding (padding) and the border (border).

Browser Support

Figures in the table represent the first browser to support the property version number.

Immediately after the number -webkit- browser or -moz- specified prefix.

Attributes
box-sizing 10.0
4.0 -webkit- 		8.0 29.0
2.0 -moz- 		5.1
3.1 -webkit- 		9.5

Do not use the CSS3 box-sizing property

By default, the width and the way high-end computing element is as follows:

width (width) + padding (padding) + border (border) = actual width elements

height (height) + padding (padding) + border (border) = actual height of the element

This means that when we set the element's width / height, the element's display height and width would be bigger (because of border element with padding will calculate width / height in).

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

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

These two <div> element, although the width and height settings the same, but the size of the real show inconsistent because div2 specified padding:

Examples

.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}

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

try it"

If you want to use this method to get the smaller box and contains within the margins, you have to take into account the border and within the margin width.

The CSS3 box-sizing property a good solution to this problem.

Use CSS3 box-sizing property

CSS3 box-sizing attribute contains padding (padding) and the border (border) in width and height of an element.

If you set on the element box-sizing: border-box; the padding (padding) and the border (border) is also included in the width and height of:

Two div is now the same size!

This tutorial!

Here are two <div> element is added box-sizing: border-box; properties of a simple example.

Examples

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

try it"

Judging from the results of box-sizing: border-box; better results, it is also a lot of developers need.

The following code can make all the elements in a more intuitive way to display size. Many browsers already support box-sizing: border-box; (but not all - which is why the input and text elements set width: 100%; the width of the post is not the same).

All elements using box-sizing is more recommended:

Examples

* {
box-sizing: border-box;
}

try it"