Tóm Tắt
CSS
box-sizing
Property
Example
Include padding and border in
the
element’s total width and height:
#example1 {
box-sizing: border-box;
}
Try it Yourself »
More “Try it Yourself” examples below.
Definition and Usage
The box-sizing
property defines how the width and height of an element are
calculated: should they include padding and borders, or not.
Show demo ❯
Default value:
content-box
Inherited:
no
Animatable:
no. Read about animatable
Version:
CSS3
JavaScript syntax:
object.style.boxSizing=”border-box”
Try it
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
Property
box-sizing
10.0
4.0 -webkit-
8.0
29.0
2.0 -moz-
5.1
3.2 -webkit-
9.5
CSS Syntax
box-sizing: content-box|border-box|initial|inherit;
Property Values
Value
Description
Demo
content-box
Default. The width and height properties (and min/max properties) includes only the content. Border
and padding are not included
Demo ❯
border-box
The width and height properties (and min/max properties) includes
content, padding and border
Demo ❯
initial
Sets this property to its default value. Read about initial
inherit
Inherits this property from its parent element. Read about inherit
More Examples
Example
Specify two bordered boxes side by side:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Try it Yourself »
Example
Set the “universal box-sizing”:
* {
box-sizing: border-box;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Box Sizing
HTML DOM reference: boxSizing property