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.

Visualizing the CSS Box Model

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 Broken Down

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:

1. Content: The innermost layer that contains the text or other elements of the target element.
2. Padding: The layer just outside the content layer. Adding space to the padding will give the visual effect of increasing the size of the content layer.
3. Border: The layer surrounding the padding layer. Many times this layer will have a small width of maybe only 1 pixel. Unlike the padding and margin layers, this layer can be given color and style.
4. Outline: The layer surrounding the border layer. This layer many times is ignored since the border does basically the same job. It can be manipulated in the same way as the border layer and given color and style.
5. Margin: The outermost layer between the target element and its parent element. Adding space to the margin will give the visual effect of increasing the content size of the parent element.

The CSS Box Model in Action

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.

1. Orange: Element content
2. Blue: Padding
3. Green: Border
4. Red: Outline
5. Yellow: Margin

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:

1. Content
2. Padding
3. Border
4. Outline
5. Margin

Shay Howe: Opening the Box Model

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.

Code Review

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;
}

Wrapping Up

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.

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!