box-sizing

< css‎ | properties
Jump to: navigation, search

box-sizing

This article is Almost Ready.



Summary

The box-sizing property alters the CSS box model used to calculate widths and heights of elements, so that they can be equal to the width and height of the content-, padding- or border-box.

Overview table

Initial value content-box
Applies to all elements that accept width or height
Inherited No
Media visual
Computed value specified value
Animatable Yes
CSS Object Model Property

Syntax

  • box-sizing: border-box
  • box-sizing: content-box
  • box-sizing: padding-box


Values

content-box
The width and height properties (also including min-width, max-width, min-height and max-height properties) are calculated as the width/height of the content, but not the border, margin, or padding. This is the traditional behaviour of width and height as specified by CSS2.1.
padding-box
The width and height (also including min-width, max-width, min-height and max-height properties) of an element are calculated as the width/height of the content plus the padding. The dimensions of the content alone are thus calculated by subtracting the padding widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0.
border-box
The width and height (also including min-width, max-width, min-height and max-height properties) of an element are calculated as the width/height of the content plus the padding and border.

The dimensions of the content alone are thus calculated by subtracting the padding and border widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
prefix
10.0
Yes
1.0
prefix
?
Unknown
8.0
Yes
7.0
Yes
3.0
prefix
5.1
Yes
padding-box
?
none
1.0
Yes
?
none
?
none
?
none

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
2.1
prefix
4.0
Yes
1.0
prefix
29.0
Yes
?
Unknown
?
Yes
?
Yes
padding-box
?
none
1.0
Yes
?
none
?
none
?
none


Examples

The following examples assume markup that looks like this.

HTML

<div class="parent">
	<div class="child"></div>
</div>

View live exampleThis CSS makes it so that the child <div> will always An element with padding that occupies half the width of its parent. This works because it has box-sizing: border-box set on it, so the total width will always be content plus padding plus border. As the border and padding get thicker, the element doesn't get larger. Instead, the content gets smaller to make way for the change.

CSS

/* Support Firefox, WebKit, Opera and IE8+ */

.parent {
   width: 50%;
   height: 200px;
   background: red;
 }
 
 .child {   
	border: 30px solid rgba(0,0,0,0.5); 
	float: left;
	padding: 3rem;
	background: blue;
	width: 50%;
	height: 100px;
	box-sizing: border-box;
 }

Input elements with type search are rendered with border-box in Safari 5 and Chrome. You can normalize this behavior across all browsers using the following code.

CSS

input[type="search"] {
	box-sizing: content-box;
}



Related specifications

Specification Status Related Changes
CSS Basic User Interface Module Level 3 W3C Working Draft

See also

Related articles

Box Model





  • box-sizing

















Other articles

External resources

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]