These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
In the lesson we'll be demystifying the CSS box model. This will involve breaking apart the various parts that make up the box model. We'll discuss the placement of each of these parts in the overall model as well as how to manipulate them. After we've introduced the core concepts of what the CSS box model is you'll read through a walkthrough that will dive into the details of the CSS box model and its smaller pieces.
It's time to think outside the box! And inside it too. Better not forget the border either.
The first step to understanding the CSS box model is to create a clear mental picture of it. If you've ever inspected an HTML element in Google Chrome you've seen something like this:
This is a detailed view of the box model of that particular element. Notice that there are rectangles within rectangles. Basically, every element is a collection of different boxes that are layered on top of each other. You can also think of it as the outer boxes containing the inner boxes. The result is the same.
The CSS box model actually has 4-5 separate boxes that form one element. Let's break down these smaller parts one by one.
The CSS box model is made up of 5 layers. However, developers usually lump the border and outline together into the same layer so it can be interpreted as only 4 layers. Here are those layers:
The simplest way to understand the CSS box model is to see how it works. Let's consider the following markup and CSS:
<div id="parent">
<div id="child">
<div id="grandchild"></div>
</div>
</div>
#parent {
background: yellow;
overflow: auto;
}
#child {
background: blue;
width: 512px;
height: 128px;
padding: 16px;
margin: 16px;
border: 8px solid green;
outline: 8px solid red;
}
#grandchild {
background: orange;
width: 512px;
height: 128px;
}
The styles above result in the following visualization below. Each color used has be assigned to show the various layers of the box model.
Don't confuse the use of the 3 divs with IDs of parent
, child
and grandchild
for the actual box model. They are merely markup styled to show a diagram of what the box model is and to visualize it using real CSS and HTML.
As you can see from the rendered and styled elements above, the box model follows the same ordering of layers we described earlier in this lesson. From innermost to outermost:
We've covered the pieces that make up the CSS box model, now your task is to read through Shay Howe's walkthrough on Opening the Box Model. The walkthrough will take you through more of the details of each part of the box model and explain some of the options you have while manipulating them with CSS properties and values.
The important bits of code from this lesson
<div id="parent">
<div id="child">
<div id="grandchild"></div>
</div>
</div>
#parent {
background: yellow;
overflow: auto;
}
#child {
background: blue;
width: 512px;
height: 128px;
padding: 16px;
margin: 16px;
border: 8px solid green;
outline: 8px solid red;
}
#grandchild {
background: orange;
width: 512px;
height: 128px;
}
Your mental image of the CSS box model is as important as your understanding of how to manipulate it. As you progress through this course and the rest of your web development career you'll realize how indispensable knowledge of the CSS box model is to creating precise styles. Now you'll know exactly what you're effecting when you tweak those margins and paddings. Now that you know how to alter the size and shape of these various layers, let's take a look at how to alter the position of the elements themselves.