Previous

CSS: Box-Sizing

The box-sizing property in CSS controls how the sizing of an element is calculated, specifically regarding its width and height properties, padding, and border. It allows you to define whether these properties should be included in the total dimensions of the element or if they should be added on top of the specified width and height.

Box Sizing Values

There are two main values for the box-sizing property:

content-box (Default):

  • Width and height only apply to the content area of the element.
  • Padding and border are added outside the specified width and height, increasing the total size of the element.
.element {
    box-sizing: content-box;
}

border-box:

  • Width and height include the content, padding, and border of the element.
  • Padding and border are included in the specified width and height, not added on top.
.element {
    box-sizing: border-box;
}

Example

Consider the following HTML and CSS code:

<div class="box content-box">Content Box</div>
<div class="box border-box">Border Box</div>
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin-bottom: 10px;
}

.content-box {
    box-sizing: content-box;
}

.border-box {
    box-sizing: border-box;
}

In this example:

  • The .content-box div has a box-sizing value of content-box, so its width of 200px excludes the padding and border, resulting in a wider total width.
  • The .border-box div has a box-sizing value of border-box, so its width of 200px includes the padding and border within the specified width, resulting in the content area being smaller due to the padding and border being accounted for within the width.

Use Cases

  1. Consistent Sizing: border-box is often preferred as it provides a more intuitive way to control the size of elements, especially in responsive designs where padding and border should be included in calculations.
  2. Legacy Browser Support: If you need to support older browsers that do not fully support the border-box value, you may opt to use content-box and adjust your calculations accordingly.

Additional Notes

  • Inheritance: The box-sizing property is inherited by child elements, meaning that if a parent element has box-sizing: border-box;, its child elements will also have box-sizing: border-box; by default.
  • Browser Support: box-sizing is supported in modern browsers, but older versions of Internet Explorer (IE7 and earlier) may require a polyfill or specific handling.

Understanding and using box-sizing appropriately can help you achieve more consistent and predictable layouts in your CSS designs.

Previous