CSS Box Model

Subject: css

CSS Box Model

The CSS Box Model is a fundamental concept that defines how the dimensions and spacing of elements are calculated on a web page. Every HTML element is treated as a rectangular box, and CSS uses the box model to determine how much space it occupies.

Components of the Box Model

Each HTML element box consists of four layers (from innermost to outermost):

  • Content: The actual text or image inside the element.
  • Padding: Space between the content and the border.
  • Border: The edge surrounding the padding and content.
  • Margin: Space outside the border that separates the element from others.

Visual Representation

🚀 Try it in Compiler

Example: Understanding the Box Model

🚀 Try it in Compiler

Total Size Calculation

By default (box-sizing: content-box), the total size of an element is calculated as:

  • Total Width = width + left/right padding + left/right border
  • Total Height = height + top/bottom padding + top/bottom border

This means the final rendered box can be much larger than the declared width/height.

Using box-sizing: border-box

To include padding and border within the specified width and height, use:

🚀 Try it in Compiler

This ensures the element’s total dimensions match what you set.

Example with box-sizing: border-box

🚀 Try it in Compiler

Key Takeaways

  • The CSS box model defines how an element’s total size is calculated.
  • It includes content, padding, border, and margin.
  • The default box-sizing is content-box, which adds padding and border outside the set width/height.
  • Using box-sizing: border-box includes padding and border within the specified dimensions.
  • Mastering the box model is essential for layout precision and responsive design.
Next: CSS Margin