What is content-box?

CSSJunior~1 min read

content-box is the standard (default) model for calculating an element's width and height in CSS. With box-sizing: content-box;, the width and height properties apply only to the content area, and padding and border are added on top of the size.

Example:

css

div {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}

The actual width of the block will be:

javascript

200 (content) + 20+20 (padding) + 5+5 (border) = 250px

Summary: with content-box, the element ends up larger than the specified width/height, because the inner area is calculated separately from the padding and borders.

Short Answer

Interview ready

Premium

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