CSS - Box Sizing

Box Model Recap

Before we discuss the box-sizing property, let's review the CSS box model. The box model defines how an element's total width and height are calculated. Every element in HTML is a rectangular box consisting of four parts: the content area, padding, border, and margin.

The content area is where the actual content (text, images) is displayed. It has a width and height determined by the width and height properties.

Surrounding the content area is the padding. Padding is the space between the content and the element's border. You can set it using the padding property or individual properties like padding-top, padding-right, padding-bottom, and padding-left.

Next comes the border, which wraps around both content and padding. The border has its own width, style, and color that you can set using either a single border property or individual properties like border-width, border-style, and border-color.

The outermost part of an element is its margin. Margin is space between an element's border and neighboring elements. You can set it using either a single margin property or individual properties like margin-top, margin-right, margin-bottom, and margin-left.

The box model affects how an element's total size is calculated. By default when you set an element’s width/height those values define only its content area size; any added padding/border/margin increases the total size beyond specified dimensions.

<div style="width: 200px; padding: 20px; border-width: 5px; border-style: solid;">
  Content
</div>

Understanding how this works helps accurately size and position elements on web pages. In the next section, we'll see how modifying the default behavior via the box-sizing property provides more intuitive sizing options.

Box Sizing Property

The box-sizing property in CSS lets you change how an element's total width and height are calculated. It has two values: content-box (default) and border-box.

The syntax for the box-sizing property is:

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

By default, the box-sizing property is set to content-box. With content-box, the element's specified width and height values only include the content area. Any padding, border, or margin added to the element will increase its total size beyond the specified dimensions.

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

With box-sizing: content-box, the actual width of the .box element will be 250px (200px content width + 40px padding + 10px border) and the height will be 150px (100px content height + 40px padding + 10px border).

Setting box-sizing: border-box changes this behavior. With border-box, the specified width and height values include the content area, padding, and border. Any padding or border added to the element will be subtracted from these dimensions to maintain a consistent size.

Using the same example but with border-box:

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

Now, the .box element will have a total width of 200px and a height of 100px. The content area will be 150px wide (200px - 40px padding - 10px border) and 50px tall (100px - 40px padding - 10px border).

The box-sizing property gives you control over how an element's size is calculated. content-box is the default and does not include padding or border in the element's dimensions, while border-box includes padding and border, making it easier to define an element's size without additional calculations.

In the following sections, we will discuss use cases and advantages of each box-sizing value and best practices for applying it in your CSS.

Using content-box

By default, the box-sizing property is set to content-box. This means that when you specify the width and height of an element using the width and height properties, those values only apply to the content area of the element. Any padding, border, or margin added to the element will increase its total size beyond the specified dimensions.

When using content-box, the total width of an element is calculated as follows:

total width = width + padding-left + padding-right + border-left + border-right

Similarly, the total height of an element is calculated as:

total height = height + padding-top + padding-bottom + border-top + border-bottom

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

In this example, the .box element has a specified width of 300px and a height of 200px. However, with added padding of 20px on all sides and a border of 5px, the actual total width becomes:

• Total Width = (300px) Width + (40px) Padding (202) + (10px) Border (52) = 350px

And similarly for Height:

• Total Height = (200px) Height + (40px) Padding (202) + (10px) Border (52) = 250px

Using content-box can be useful in situations where you want to add padding and borders without changing content dimensions.

Some use cases for content-box include:

1. Creating elements with fixed content sizes like images or videos.
2. Building layouts where you need separate calculations for total size.
3. Styling elements with decorative borders or paddings that should not affect content size.

However, using content-box can sometimes lead to sizing issues in complex layouts or responsive designs. In such cases, using border-box may provide a more intuitive approach to sizing elements.

Using border-box

The border-box value for the box-sizing property differs from the default content-box in how it calculates an element's total size. When using border-box, the specified width and height values include the content area, padding, and border. This means that any padding or border added to the element will be subtracted from the specified dimensions to maintain the element's total size.

With border-box, the total width of an element is calculated as follows:

width = content width + padding-left + padding-right + border-left + border-right

And the total height is calculated as:

height = content height + padding-top + padding-bottom + border-top + border-bottom

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

* {
    box-sizing: border-box;
}

.column {
    width: 50%;
    float: left;
}

Applying Box Sizing Globally

One common practice when using box-sizing: border-box is to apply it globally to all elements on a web page. This makes sure that all elements have a consistent sizing behavior, making it easier to build layouts and components without worrying about unexpected size changes due to padding or borders.

* {
  box-sizing: border-box;
}

The universal selector targets every element on the page, including the root <html> element and all its descendants. By setting box-sizing: border-box on the universal selector, you make sure that every element inherits this sizing behavior.

When applying box-sizing globally, there are a few considerations and best practices to keep in mind:

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

.column {
  width: 50%;
  float: left;
  padding: 10px;
}

Box Sizing and Responsiveness

When creating responsive layouts, the box-sizing property plays a key role in how elements adapt to different screen sizes. By default, elements with box-sizing: content-box can cause layout issues when combined with percentage-based widths or fluid layouts. This is because the element's total size will exceed the specified width once padding and borders are added.

Using box-sizing: border-box is useful for responsive designs. With border-box, an element's specified width includes the content area, padding, and border. This means that you can set percentage-based widths on elements, and they will maintain their size even if you add padding or borders.

* {
  box-sizing: border-box;
}

.column {
  width: 50%;
  padding: 10px;
  float: left;
}