HTML and CSS Reference
In-Depth Information
box-sizing
The dimension properties normally refer to the content area, not the padding or border
area. Therefore, to know the actual width or height that an element occupies in the box
model, the surrounding padding and border have to be taken into account.
/* 100 pixels wide element */
.mybox {
padding: 3px;
border: 2px solid red;
width: 90px;
}
CSS 3 introduced the box-sizing property to allow web developers a choice of how
widths and heights are calculated. The default value is content-box , which means the
dimension properties refer only to the content area. The alternative border-box value
includes the padding and borders in these measurements.
box-sizing : content-box | border-box
By changing the box sizing to border-box , you can create a grid layout more easily
because you no longer need to take the padding and border sizes into account.
/* 100 pixel wide element */
.mybox {
box-sizing: border-box;
padding: 3px;
border: 2px solid red;
width: 100px;
}
The border-box property does not inherit, but it can be applied to all elements on the
website using the universal selector. To increase browser support, the -webkit and -moz
prefixes should be used.
/* Use border-box for all elements */
* {
/* Chrome 1-8, Safari 3-5 */
-webkit-box-sizing: border-box;
/* Firefox 1-28*/
-moz-box-sizing: border-box;
/* Chrome 9+, Firefox 29+, IE8+, Safari 5.1+, Opera 9.5+ */
box-sizing: border-box;
}
Browser support for the box-sizing property has become so good that all major
browsers now support it. As such, many new websites have started to employ this
property to simplify the grid calculations for their layouts.
 
Search WWH ::




Custom Search