Box sizing

CSS Box Model: box-sizing

The CSS box model is a fundamental concept in web development, describing how elements are rendered on a page. Each HTML element is treated as a rectangular box, consisting of content, padding, border, and margin. Understanding how these components interact is crucial for controlling layout and styling.

The box-sizing property controls how the total width and height of an element are calculated. By default, the width and height properties only apply to the content area of the box. Padding and border are added to this content width/height, potentially making the element larger than specified. This can lead to unexpected layout issues.

content-box (Default Value)

This is the initial value of the box-sizing property.

• Width/Height: Applies only to the content area.
• Total Width: width + padding + border
• Total Height: height + padding + border

Example:

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
}

In this case, the actual rendered width of .box will be 200px + 20px (padding-left) + 20px (padding-right) + 5px (border-left) + 5px (border-right) = 250px. Similarly, the height will be 100px + 20px + 20px + 5px + 5px = 150px.

border-box

This value changes the way width and height are calculated. It's often preferred for more predictable layouts.

• Width/Height: Applies to the entire box, including padding and border.
• Total Width: width (padding and border are included within this width)
• Total Height: height (padding and border are included within this height)

Example:

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

Now, the rendered width of .box will be exactly 200px. The browser will adjust the content area to accommodate the padding and border within that 200px. The height will be exactly 100px.

inherit

Inherits the box-sizing value from its parent element.

Practical Usage & Best Practices

• Resetting with border-box: A common practice is to apply box-sizing: border-box globally to all elements using a CSS reset or normalization. This makes width and height calculations much more intuitive.

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

• Predictable Layouts: Using border-box simplifies layout calculations, especially when dealing with responsive designs and complex grids.

• Avoid Surprises: border-box prevents elements from unexpectedly overflowing their containers due to padding or borders.

In summary: box-sizing: border-box is generally recommended for most projects as it provides a more intuitive and predictable box model, leading to easier layout management and fewer unexpected styling issues. Understanding the difference between content-box and border-box is essential for mastering CSS layout.