Box model (margin, padding, border, content)
The CSS box model describes how HTML elements are rendered as rectangular boxes, composed of content, padding, border, and margin.
element { margin: 10px; border: 1px solid black; padding: 20px; width: 100px; height: 50px; }This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.
What it does
Overview
The CSS box model describes how HTML elements are rendered as rectangular boxes, composed of content, padding, border, and margin.
The CSS box model is a fundamental concept in web design, defining how every HTML element is represented as a rectangular box. This model dictates how space is taken up by elements and how they interact with each other on the page. Each box consists of four distinct layers, from innermost to outermost: 1. **Content Box**: This is where the actual content (text, images, video, etc.) of the element resides. Its dimensions are typically controlled by `width` and `height` properties. 2. **Padding Box**: This is the transparent space directly surrounding the content. It's controlled by the `padding` properties (e.g., `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, or shorthand `padding`). Padding adds space between the content and the element's border, and it takes on the background color of the element. 3. **Border Box**: This is the line that wraps around the padding and content. It's controlled by the `border` properties (e.g., `border-width`, `border-style`, `border-color`, or shorthand `border`). The border is visible and adds to the element's overall size. 4. **Margin Box**: This is the transparent space outside the border, creating separation between the element and other adjacent elements. It's controlled by the `margin` properties (e.g., `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, or shorthand `margin`). Margins do not take on the element's background color and can collapse vertically between adjacent block-level elements. Understanding the box model is critical for accurately controlling layout, spacing, and element dimensions on a web page. By default, `width` and `height` refer to the content box, but this behavior can be changed using `box-sizing: border-box`.
Quick reference
Syntax
element { margin: 10px; border: 1px solid black; padding: 20px; width: 100px; height: 50px; }Inputs
Parameters
See it in practice
Examples
Basic box model illustration
<style>
.box {
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid black;
margin: 15px;
background-color: lightblue;
}
</style>
<div class="box">Content</div>A light blue box with 'Content' text. It has 10px internal padding, a 5px black border, and 15px external margin.
This example visually demonstrates all four parts of the box model: the content area (`width`, `height`), `padding`, `border`, and `margin`.
Padding affecting element size (default `box-sizing`)
<style>
.box1 {
width: 100px;
height: 50px;
padding: 10px;
background-color: lightcoral;
border: 1px solid red;
}
</style>
<div class="box1"></div>A lightcoral box with an actual rendered width of 122px (100px content + 10px left padding + 10px right padding + 1px left border + 1px right border).
By default (`box-sizing: content-box`), `width` and `height` only refer to the content area. Padding and border are added *on top* of these dimensions, increasing the element's total size.
Margin collapsing example
<style>
.top-box { margin-bottom: 20px; background-color: lightgreen; height: 50px; }
.bottom-box { margin-top: 30px; background-color: lightyellow; height: 50px; }
</style>
<div class="top-box"></div>
<div class="bottom-box"></div>Two boxes separated by 30px, not 50px (20px + 30px).
Vertical margins between adjacent block-level elements collapse, meaning only the larger of the two margins is applied, not their sum. Here, 30px wins over 20px.
Debug faster
Common Errors
Incorrect Element Sizing
Cause: Elements appearing larger than expected because padding and border are added to the `width`/`height` (default `box-sizing: content-box`).
Fix: Use `box-sizing: border-box;` for all elements (often set globally with `* { box-sizing: border-box; }`). This makes `width` and `height` include padding and border, simplifying layout calculations.
div { width: 100px; padding: 10px; border: 1px solid; } /* Total width will be 122px */Runtime support
Compatibility
Source: MDN Web Docs
Common questions
Frequently Asked Questions
The CSS box model describes how HTML elements are rendered as rectangular boxes, composed of content, padding, border, and margin.
width: Sets the width of the content area. height: Sets the height of the content area. padding: Sets the space between the content and the border. border: Sets the border around the padding box. margin: Sets the space outside the border, separating elements.
Incorrect Element Sizing: Use `box-sizing: border-box;` for all elements (often set globally with `* { box-sizing: border-box; }`). This makes `width` and `height` include padding and border, simplifying layout calculations.