CSS box-sizing Property
The box-sizing property defines the calculation of the width and height of an element, if they include padding and borders.
The box-sizing property is one of the CSS3 properties.
The width and height of an element, by default, is calculated like this:
- width + padding + border = actual width of an element
- height + padding + border = actual height of an element
So, when the width and height of an element is defined, the element often appears bigger than it was set (because the element’s border and padding are added to the element’s specified width and height).
| Initial Value | content-box |
| Applies to | All elements that accept width and height. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.boxSizing = «border-box»; |
Syntax
In this example there are shown two <div> elements with the same specified width and height:
Example of the box-sizing property:
Result
If box-sizing is defined as content-box , the full width will be more than div’s defined width. And if box-sizing: border-box is defined, padding and border will be included in the width and height .
The box-sizing and border-box properties are used for layouting elements. This method is useful because it makes working with the elements’ sizes easier by eliminating the number of pitfalls that can be stumbled on when you are laying out the content.
box-sizing
The box-sizing CSS property sets how the total width and height of an element is calculated.
Try it
By default in the CSS box model, the width and height you assign to an element is applied only to the element’s content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that’s rendered on the screen. This means that when you set width and height , you have to adjust the value you give to allow for any border or padding that may be added. For example, if you have four boxes with width: 25%; , if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container.
The box-sizing property can be used to adjust this behavior:
- content-box gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
- border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. box-sizing: border-box is the default styling that browsers use for the <table> , <select> , and <button> elements, and for <input> elements whose type is radio , checkbox , reset , button , submit , color , or search .
Note: It is often useful to set box-sizing to border-box to lay out elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using position: relative or position: absolute , use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.
Syntax
The box-sizing property is specified as a single keyword chosen from the list of values below.
Values
This is the initial and default value as specified by the CSS standard. The width and height properties include the content, but does not include the padding, border, or margin. For example, .box
Here, the dimensions of the element are calculated as: width = width of the content, and height = height of the content. (Borders and padding are not included in the calculation.)
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box
Here the dimensions of the element are calculated as: width = border + padding + width of the content, and height = border + padding + height of the content.
Formal definition
| Initial value | content-box |
|---|---|
| Applies to | all elements that accept width or height |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
Examples
Box sizes with content-box and border-box
This example shows how different box-sizing values alter the rendered size of two otherwise identical elements.
Box Sizing
The box-sizing property can make building CSS layouts easier and a lot more intuitive. It’s such a boon for developers that here at CSS-Tricks we observe International Box-Sizing Awareness Day in February.
But, how is it so helpful and beloved that it deserves its own internet holiday? Time for a little bit of CSS history.
Box Model History
Since the dawn of CSS, the box model has worked like this by default:
width + padding + border = actual visible/rendered width of an element’s box
height + padding + border = actual visible/rendered height of an element’s box
This can be a little counter-intuitive, since the width and height you set for an element both go out the window as soon as you start adding padding and borders to the element.
Back in the old days of web design, early versions of Internet Explorer ( The box at the top shows the default box model. The box at the bottom shows what was once the “quirks mode” interpretation of the box model.
Some people preferred this “quirky” interpretation of the box model and considered it more intuitive. It’s a valid point. Having the actual visible width of a box turn out differently from what you declared in the CSS is a bit mind bending.
But, in the days of fixed-width design, it wasn’t particularly complicated to work with the default box model once you understood it. You could do a bit of arithmetic to figure out how many pixels you needed to trim off of an element’s declared width or height to accommodate its padding and border. The problem for present-day developers is that those absolute pixel lengths don’t translate to responsive design, so the same math doesn’t apply anymore.
As responsive design (or, as it was once known, “fluid” or “liquid” layout) started to gain popularity, developers and designers wished for an update to the box model. The great designer Jon Hicks, known for his excellent fluid width designs, had this to say on the subject in the CSS Wishlist we put together in 2008:
I would love a different box model! I find it bizarre that padding and border add the width of an object, and would love to be able to give something like a textarea 100% width and 3px padding without worrying what it’s going to do the layout. Perhaps something like padding-inside as a new selector?
In that vein I also wish I could specify a 100% width for an element, minus a set fixed width. Again, very useful when creating fluid designs with form elements!
Those wishes were granted when the box-sizing property was introduced in CSS3. Though box-sizing has three possible values ( content-box , padding-box , and border-box ), the most popular value is border-box .
Today, the current versions of all browsers use the original “width or height + padding + border = actual width or height” box model. With box-sizing: border-box; , we can change the box model to what was once the “quirky” way, where an element’s specified width and height aren’t affected by padding or borders. This has proven so useful in responsive design that it’s found its way into reset styles.
At this point you may be asking yourself, “Is it possible that Old IE did something right?” Plenty of people think so.
This demo shows how border-box can help make responsive layouts more manageable. The parent div ‘s width is 50%, and it has 3 children with different widths, padding, and margins. Click the border-box button to get all the children in the right place inside the parent.
Good, Better, and (Probably) Best box-sizing Reset Methods
The earliest box-sizing: border-box; reset looked like this:
This works fairly well, but it leaves out pseudo elements, which can lead to some unexpected results. A revised reset that covers pseudo elements quickly emerged:
Universal Box Sizing
This method selected pseudo elements as well, improving the normalizing effect of border-box . But, the * selector makes it difficult for developers to use content-box or padding-box elsewhere in the CSS. Which brings us to the current frontrunner for best practice:
Universal Box Sizing with Inheritance
This reset gives you more flexibility than its predecessors — you can use content-box or padding-box (where supported) at will, without worrying about a universal selector overriding your CSS. We went into more depth on this technique and the reasoning behind it in “Inheriting box-sizing Probably Slightly Better Best Practice”. One potential gripe with it is that box-sizing isn’t normally inherited, so it’s specialized behavior, not quite the same as something you’d normally put in a reset.
Every current browser supports box-sizing: border-box; unprefixed, so the need for vendor prefixes is fading. But, if you need to support older versions of Safari ( -webkit and -moz , like this:
box-sizing: border-box; is supported in the current versions of all major browsers. The less-commonly used padding-box is only supported in Firefox at the moment. There’s more comprehensive information about browser support in our box-sizing almanac entry.
There are a few issues with older versions of Internet Explorer (8 and older). IE 8 doesn’t recognize border-box on elements with min/max-width or min/max-height (this used to affect Firefox too, but it was fixed in 2012). IE 7 and below do not recognize box-sizing at all, but there’s a polyfill that can help.
BOX-SIZING: Make your CSS hassle-free
Before we get into the details of this amazing CSS3 property, let’s understand what a box model is.
What is a box model?
A box model is a rectangular box that wraps around every HTML element. It comprises of the margin, padding, border and content inside the element.
It’s worth mentioning again: Every element on a page is a rectangular box.
Let’s understand what each of these properties are:
Content: This is the part of the box where the actual content of the box appears. This often has a background or an image.
Padding: It is transparent and is used to clear space around the content inside an element.
Border: This goes around the padding and content. By default it’s value is zero.
Margin: It is transparent and is the space around the box.
The total space occupied by a box on the DOM is the overall space occupied by these four properties put together.
The size of the box in figure 1 is determined as described below:
Total width of the box-model = width assigned to the box + padding(right and left) + border(right and left) + margin(right and left)
Total height of the box-model= height assigned to the box + padding(top and bottom) + border(top and bottom) + margin(top and bottom)
Why do we need to use the box-sizing property?
To understand Figure 2. better, let’s consider an example: An element is assigned a width of 100px or a relative width of 40%, the element will have the exact width on the DOM, only if there is no padding or margin assigned to the element. If it does have a padding and/or border assigned to it then the actual values for the rendered element will be as follows:
Actual rendered width = width assigned to the box + padding(right and left) + border(right and left)
Actual rendered height = height assigned to the box + padding(top and bottom) + border(top and bottom)
Thus, in order to get the desired width and height as specified in the design for the element that is rendered on the DOM, we often recalculate the width and height by subtracting the padding and border, either manually or by using the calc(width-valuex) function, (where valuex is the sum of the padding and/or border assigned to that element) from their respective dimensions.
In the snippet below, the actual width of the element is 300px, but since we assign border and padding to it, we manually recalculate the width as
width = 300–40(padding-right and padding-left)–10(border-right and border-left) or use the calc function.
This makes the code less readable because, it doesn’t make it very obvious when we see that the assigned width is 250px, while the rendered width is 300px. Here comes the use case of applying the box-sizing property to an element.
It could be possible that we may have increased values(width and height) when an element is rendered on the DOM if we do not recalculate the width and height of the element as in the above example. In the example below, we see that the total width rendered on the DOM is 350px(recalculation of the width isn’t done)
To overcome situations like these, we can make use of the CSS3 property “BOX-SIZING”.
What is box-sizing?
The box-sizing property tells the browser what the sizing properties (width and height) should include.
Box-sizing property has the following syntax:
By default it takes the value content-box.
When box-sizing: border box, property-value combination is used in an element, this tells the browser to render the width property as the actual rendered width. Modifying the previous code as follows:
Here, the padding or border will not be applied to the rendered width. Instead, this property-value pair will automatically subtract the space available within the content-area(refer figure 2) of the element.
Below is a codepen demonstrating an example of an element with and without the box-sizing property.
To have a more natural and intuitive approach for a layout, most web designers and developers commend the usage of box-sizing property.
Universal box-sizing:
Vendor-prefixes for box-sizing:
Use these vendor prefixes to support box-sizing on different browsers and this property is IE8+ enabled.