Css3-box-sizing

box-sizingthe CSS3 property can be set to include padding (padding) and border (border) in the width and Height properties.

The default CSS

Width is: width (width) + padding (padding) + border (border) = element actual width

Height is: height (high) + padding (padding) + border (border) = element actual height

This means that two div elements are the same size, but because setting padding or border also affects the size of the elements such as:

<! DOCTYPE html>{margin:0;padding:0}. Box1,. Box2{width:100px;Height:100px; }. Box1{padding:20px;Border:1px solid Red; }. Box2{Border:1px solid Blue; }</style>

The effect is as follows:

The same width and height, but because the box1 increases the padding and the width height is large: (padding) + 100 (width) + 2 (border) = 142;

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

box-sizing: border-box;padding (padding) and border (borders) are also included in width and height if they are set on the element:

The results are box-sizing: border-box; better, and that's what many developers are looking for.

Css3-box-sizing