The Box Model

💡 The Concept

Now that you know how to use padding and margin, it helps to understand the system behind them. Every HTML element on the page is a rectangular box. The CSS Box Model describes the four layers that make up that box, from the inside out:

• Content: the text, image, or other content inside the element
• Padding: space between the content and the border, inside the border
• Border: the line that wraps around the padding and content
• Margin: space outside the border, separating the element from others

Understanding the box model helps you predict how elements behave when you resize them, add borders, or adjust spacing. When you look at a page in Chrome DevTools, the box model diagram in the bottom-right of the Styles panel shows the exact pixel values of each layer for any selected element.

box-sizing: border-box

By default, when you set a width on an element, that width applies only to the content area. Padding and border are added on top of it, which can make elements wider than you expect. Most developers add this rule to every project to fix that:

* {
   box-sizing: border-box;
}

With border-box, the width you set includes the padding and border, so elements stay the size you intended. The * selector applies the rule to every element on the page. You will see this in almost every professional stylesheet.

🎬 Video Demonstration

This video demonstrates how the box model works and how all four layers interact.

Exercise: Try It Yourself

This is the same exercise as the previous lesson. If you completed it there, you can skip ahead. It is here in case you arrived at this page directly.

Step 1. Open JSFiddle and paste this into the HTML panel:

<h1>Spacing Demo</h1>
<img src="https://webdevstudents.com/wp-content/uploads/2025/09/axylotl.png" alt="pink axolotl in a tank" width="100" height="100">

Step 2. Paste this into the CSS panel:

img {
  background-color: lightblue;
  border: 5px solid steelblue;
}

Step 3. Add padding: 20px to img. Watch the space grow inside the border.

Step 4. Add margin: 30px to img. Watch the space push other elements away. Your JSFiddle now looks like the screenshot below. Note the lightblue background color shows the padding.

Step 5. Now try centering the image. Add display: block to img and change the margin to 0 auto. Images are inline by default, so display: block is needed for centering to work.

❓ Frequently Asked Questions

★ Key Takeaways

Every element on a web page lives inside an invisible box with four layers: content, padding, border, and margin. Understanding the box model gives you a mental picture of why your spacing and sizing behave the way they do. Next, you will learn how to center content on the page.

← Back to Page Layout Lessons

← Back to All Lessons