CSS - box-sizing Property

Quiz

CSS box-sizing property 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, we can alter this behavior to include or exclude the padding and border from the width and height calculation.

Syntax

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

Property Values

Value	Description
content-box	It returns the default behavior, where padding or/and border are added in the total width and height of the element. Default value.
border-box	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.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Box Sizing Property

The following examples explain the box-sizing property with different values.

Box Sizing Property with Content Box

To let the width of the element be dependent on padding and border specified for the element such that the total width becomes the sum of the specified width, padding and margin of the element, we use the content-box value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .sample-box {
         width: 200px;
         height: 100px;
         background-color: rgb(241, 234, 85);
      }

      .content-box {
         width: 200px;
         height: 100px;
         padding: 20px;
         border: 3px solid rgb(64, 10, 215);
         background-color: lightpink;
         box-sizing: content-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS box-sizing property
   </h2>
   <p>
      Content-box width = specified width + 
      padding (left and right)+ border(left and right),
      so the size changes.
   </p>
   <div class="sample-box">
      SAMPLE BOX
      <p>
         This box has a width: 200px 
         padding: 0px, border: 0px, 
         total width: 200px
      </p>
   </div><br/>
   <div class="content-box">
   CONTENT BOX
      <p>
         This box has a width: 200px, 
         padding: 20px, border:3px, 
         total width: 246px, see the 
         width of this box has increased
      </p>
   </div>
</body>

</html>

Box Sizing Property with Border Box

To let the width of the element be independent of padding and border specified for the element such that the total width includes the padding and margin and still maintain the specified width, we use the border-box value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .sample-box {
         width: 200px;
         height: 100px;
         background-color: rgb(241, 234, 85);
      }

      .content-box {
         width: 200px;
         height: 100px;
         padding: 4px;
         border: 3px solid rgb(64, 10, 215);
         background-color: lightgreen;
         box-sizing: border-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS box-sizing property
   </h2>
   <p>
      border-box width = specified width
      (includes padding and boder), see the boxes,
      the size does not change.
   </p>
   <div class="sample-box">
      SAMPLE BOX
      <p>
         This box has a width: 200px
         padding: 0px, border:0px, 
         total width: 200px
      </p>
   </div><br/>
   <div class="content-box">
      BORDER BOX
      <p>
         This box has a width: 200px,
         padding: 4px, border:3px, 
         total width:200px
      </p>
   </div>
</body>

</html>

Speciality of Border Box Value

As, the border-box value does not affect the width of an element in the presence or absence of padding and/or border, it is the most popularly used by developer as this avoids the calculations of the widths of elements. The following example shows how the structure.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      *{
         box-sizing: border-box;
      }
      .sample1{
         width: 300px; 
         padding: 10px;
         border: 10px solid green;
      }
      .sample2{
         width: 300px; 
         background-color: lightblue;
      }
   </style>
</head>

<body>
   <h2>
      CSS box-sizing property
   </h2>
   <h3 class="sample1"> 
      This is a h3 heading- the width is 300px
      only despite having padding and border.
   </h3>
   <p class="sample2"> 
      This is a paragraph- the width is 300px
      without padding and border.
   </p>
</body>

</html>

Supported Browsers

Property
box-sizing	10.0	8.0	29.0	5.1	9.5

css_properties_reference.htm

Print Page