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 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

box-sizing: content-box | border-box | initial | inherit;

In this example there are shown two <div> elements with the same specified width and height:

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      .div1 {
      box-sizing: content-box;
      width: 400px;
      height: 50px;
      padding: 50px;
      border: 5px double #1c87c9;
      }
      .div2 {
      box-sizing: border-box;
      width: 400px;
      height: 50px;  
      padding: 50px;
      border: 5px dashed #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Box-sizing Example</h2><hr />
    <h3>box-sizing: content-box (default):</h3>
    <div class="div1">The width for this div is set as 400px. Thus, the full width is 400px + 10px (left and right border) + 100px (left and right padding) = 510px.</div>
    <br>
    <h3>box-sizing: border-box:</h3>
    <div class="div2">The width and height apply to all parts of the div element: The full width is 400px.</div>
  </body>
</html>

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.

Let’s see another example with two bordered boxes defined side by side.

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div.container {
      width: 100%;
      border: 2px double #1c87c9;
      }
      div.box {
      box-sizing: border-box;
      width: 50%;
      border: 3px solid #ccc;
      float: left;
      padding: 3px;
      }
    </style>
  </head>
  <body>
    <h2>Box-sizing Example</h2>
    <p>Here you can see two bordered boxes defined side by side.</p>
    <div class="container">
      <div class="box">Left part</div>
      <div class="box">Right part</div>
      <div style="clear:both;"></div>
    </div>
  </body>
</html>

Values

Value Description
content-box The width and height properties include the content, but the padding, border, or margin doesn’t included. It is the default value.
border-box The width and height properties include the content, padding and border, but do not include the margin.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Related Resources

Border, border-style, border-color, border-width, <div> , padding, height, width, content, margin.




Related articles