CSS box-sizing

The <box-sizing> property determines how the browser calculates the width and height of an element: only the content, or including padding and border values.

How box-sizing Works

It has two main values: <content-box> (default) and <border-box>. In content-box mode, the specified width and height only apply to the content, while in border-box mode, padding and border are also included.

In the following code, we compare two boxes: one with content-box and the other with border-box setting:

Visualization Examples

The examples show that border-box provides much more predictable sizing, as padding and border remain within the specified dimensions.

Comparison of Content-box and Border-box

The difference between content-box and border-box lies in what is included in the width and height. Border-box helps make the total element size predictable.

Global Reset Setting

In practice, it is almost always advisable to set border-box for all elements. For this, we use a CSS reset rule.

Using box-sizing in Layouts

If you want to place several elements side by side in a fixed-width container, border-box ensures that padding and border do not push elements out of the parent.

Tips for Using box-sizing

The correct use of box-sizing makes layout planning easier. Here are some tips:

• It is generally recommended to use <box-sizing: border-box;> across the entire page.
• Use reset CSS to standardize the box-sizing setting for all elements.
• Test in different browsers to ensure consistent appearance.