CSS - Box Sizing

The box-sizing property in CSS is used to define how the total width and height of an element is calculated. By default, the width and height of an element includes its content, padding, and border. However, with the box-sizing property, you can alter this behavior to include or exclude the padding and border from the width and height calculation.

In older version of CSS (CSS2), the default way in which the box model worked made the element look bigger than the dimensions that were passed to it (width and height).

width + padding + border = actual visible/rendered width of an element's box

height + padding + border = actual visible/rendered height of an element's box

CSS box sizing property

The CSS box-sizing property is useful in adjusting the behaviour of the layout of the elements.

Possible Values

The box-sizing CSS property can have a value, that is a keyword, either of one of the following:

content-box: This is the default value. When this value is passed to box-sizing property, it returns the default behavior, where padding or/and border are added in the total width and height of the element.
border-box: When this value is passed to box-sizing property, it tells the browser to adjust the padding or margin values, that are passed to an element. This results in shrinking the content area and absorbing the border or/and padding specified for the element. It is the default styling used for <table>, <select>, <button>, and <input> elements.

padding-box value is not supported by any browser and hence can not be passed to the box-sizing property.

Applies to

All the HTML elements that accept width or height.

DOM Syntax

object.style.boxSizing = "content-box | border-box";

Example

Here is an example of CSS property box-sizing: border-box:

<html> 
<head>
<style>
   .with-content-box {
      width: 200px;
      height: 100px;
      padding: 10px;
      border: 3px solid green;
      background-color: rgb(241, 234, 85);
      box-sizing: content-box;
   }
   .with-border-box {
      width: 200px;
      height: 100px;  
      padding: 10px;  
      border: 3px solid rgb(64, 10, 215);
      background-color: lightpink;
      box-sizing: border-box;
   }
</style>
</head>
<body>
   <div class="with-content-box">CONTENT BOX</div><br />
   <div class="with-border-box">BORDER BOX</div>
</body>
</html>

The example given above shows a clear difference between the box-sizing: border-box and box-sizing: content-box property values. Here the box-sizing: border-box property ignores the padding value in calculation of total width and height. Whereas the box-sizing: content-box property value includes the padding value in the calculation.

For a smooth, fluid and intuitive responsive design, the box-sizing: border-box value can be set in the following manner:

* {
   box-sizing: border-box;
}

The above syntax may not give desired results, as it ignores the pseudo-elements. So there is another syntax which includes the pseudo-elements for the reset.

*, *:before, *:after {
   box-sizing: border-box;
}

This universal box sizing method will make the use of box-sizing: content-box | padding-box difficult. Hence, there is one more syntax that may be more useful and apt in such situations.

html {
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}

This universal box-sizing reset syntax is more useful and gives more flexibility to the users.

Though every current browser supports the box-sizing: border-box, unprefixed; but some older versions of the browsers need support. In order to provide that support you may need to use the prefixes -webkit and -moz in the following manner:

html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
*, *:before, *:after {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit;
}

Print Page