? CSS Box Model

⚡ Quick Overview

The CSS Box Model describes how every element on a web page is built as a box: it has content, optional padding, a border, and a surrounding margin. Understanding this model is essential for controlling layout, spacing, and alignment in modern web design.

? Box = Content + Padding + Border + Margin

? Key Concepts

Content: The actual data inside the element, such as text, images, or other nested elements.
Padding: Space inside the box, between the content and the border.
Border: A visible line that wraps around the padding and content.
Margin: Space outside the border that separates the element from other elements.

? Syntax & Theory

The total size of a box depends on its declared width and height, plus any padding, border, and margin. By default, the width and height apply only to the content area.

? View Code Example (Generic Box Model Syntax)

/* Generic box model syntax for any selector */
selector {
  width: value;
  height: value;
  padding: value;
  border: value;
  margin: value;
}

? Code Example: Styled Box

Here is a simple example of a box that uses all four parts of the box model: width, height, padding, border, and margin.

? View Code Example (.box)

/* A visible box using all key box model properties */
.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid #007bff;
  margin: 30px;
}

? Box Sizing

By default, the declared width and height apply only to the content. Padding and border are added on top of that, which can make the box larger than expected. To make layout easier, you can use: box-sizing: border-box;

With border-box, the declared width and height include the content, padding, and border. This is very common in modern CSS layouts.

? View Code Example (box-sizing)

/* Make width and height include padding and border for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

? Live Output & Explanation

Visual Demo of the Box Model

This box demonstrates the CSS Box Model with content, padding, border, and margin.

Content: The inner paragraph that you can read.
Padding: Space around the text inside the blue-bordered area.
Border: The blue line surrounding the box.
Margin: Empty space outside the border, separating this box from other content.

? Key Properties Reference

Property	Description	Example
`width`	Defines the content width.	`300px`, `50%`
`height`	Defines the content height.	`200px`, `auto`
`padding`	Space between content and border.	`20px`
`border`	Defines a boundary around the box.	`1px solid #000`
`margin`	Space outside the box.	`20px`

? Tips & Best Practices

Use box-sizing: border-box; across your project so widths and heights are easier to reason about.
Always remember the total width of a box (default box model) is: total = width + left padding + right padding + left border + right border.
Use margin to create space between elements, and padding to create space inside elements.
For responsive layouts, prefer percentages or relative units (like %, rem) for width and margin.
When debugging layout issues, temporarily add borders to see where each box starts and ends.

? Try It Yourself

Create a .card class with different padding, border, and margin values. Observe how each property affects the spacing around and inside the card.
Set a fixed width on a box and experiment with increasing padding and border both with and without box-sizing: border-box;.
Build a simple layout with three boxes side-by-side and adjust their margins so they are evenly spaced and centered on the page.
Use your browser’s DevTools to inspect elements and visually see the content, padding, border, and margin highlighted.