Box-sizing and why it matters

Eric Njnaga Dec 02, 2017

An understanding of box-sizing is of tremendous importance when building stable and solid responsive layouts. Box-sizing is part of the box-model CSS module, it dictates how the browser should render box elements. Box-sizing is connected to four CSS properties:

  • width
  • height
  • padding
  • border

The box-sizing answers the question of: “How should these four CSS properties be applied when rendering a box element? Should they be applied within or outside the box content? The answer to these questions will determine how box elements will react to change of these specific CSS properties.

Two values are attributed to box-sizing property: content-box and border-box.

… Image box here …

content-box: The box element grows from the content-out


div {
box-sizing: content-box;
}

Applying the content-box value forces the browser to apply the padding and border values outside the box element edges. This means editing the padding and border CSS values will affect the element starting from its content, moving outside (the content remains the same while the width and height will either shrink or expand). This can be summarized by the following equations:

Applying the content-box value forces the browser to include the padding and border values in calculating the final rendering of the box element width and height. This means the box will grow from the outside while its content will remain the same. This can be summarized by the following equations:

Rendered box element = width + padding + border
Rendered box element = height + padding + border

Pros: It might be probably useful to employ the content-box in case you want a dynamically added element to push its container or the adjacent boxes around.

Cons: content-box creates an unstable layout because any change of padding or border affects a box element width and height, which in turn affects everything around (container, adjacent boxes, …).

border-box: The box element grows from the border-inward


div {
box-sizing: border-box;
}

Applying the border-box value forces the browser to apply the padding and border values within the box element edges. This means editing the padding and border CSS values will affect the element starting from its border, moving inside (the content will either shrink or expand while the width and height will remain the same). This can be summarized by the following equations:

Box element actual width = width + padding + border
Box element actual height = height + padding + border

Pros: content-box helps create very stable layouts are also very easy to maintain. Because editing the padding or border of an element only affect what is inside that element.

Cons: Difficult to see a con of this method (feel free to let me know if you find any).

Best Practices

It is strongly recommended to use the border-box as a base for your layout box-sizing. Thankfully, all the major CSS frameworks these days are initially set up with border-box, but it’s always important to understand the why things are the way they are.

Further reading