CSS box-sizing Property
Example
Include padding and border in the element's total width and height:
#example1 {
box-sizing: border-box;
}
box-sizing: border-box;
}
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.
Default value: | content-box |
---|---|
Inherited: | no |
Animatable: | no. |
Version: | CSS3 |
JavaScript syntax: | object.style.boxSizing="border-box" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
box-sizing
is applied. - Animatable - "Animatable = no" means that it cannot be animated with CSS
@keyframes
.
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 | |
border-box | The width and height properties (and min/max properties) includes content, padding and border | |
initial | Sets this property to its default value. | |
inherit | Inherits this property from its parent element. |
More Examples
Example
Specify two bordered boxes side by side:
div {
box-sizing: border-box;
width: 50%;
border: 5px solid blue;
float: left;
}
box-sizing: border-box;
width: 50%;
border: 5px solid blue;
float: left;
}
Example
Set the "universal box-sizing":
* {
box-sizing: border-box;
}
box-sizing: border-box;
}
Comments
Post a Comment