Skip to main content

How does CSS calculate an element's final size?

CSSJunior~1 min read
Suggest an edit

The final size is calculated according to the Box Model. The formula depends on box-sizing.

1) With box-sizing: content-box (the default value)

width and height apply only to content. Actual width:

javascript
content width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Actual height:

javascript
content height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

2) With box-sizing: border-box

width and height include content + padding + border.

Actual width:

javascript
width (padding and border already inside) + margin-left + margin-right

Actual height:

javascript
height (padding and border already inside) + margin-top + margin-bottom

Key points

  • margin never counts toward width/height, it is outer space.
  • padding and border increase the size only with content-box.
  • border-box helps keep sizes fixed.

If you'd like, I can visualize this with an ASCII diagram or make a picture-diagram.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit
How does CSS calculate an element's final size?: CSS Interview Question