Lesson 1: Understanding the Box Model in CSS

Overview

Most HTML elements are containers. Consider some of the HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li, table, th, td. Each of these is a container, or box. Each box has three layers that surround its content. The layers are, in order from inside to outside:

In this lesson you will learn more about the box model, and how to work with it when applying styles to content using CSS.

Learner Outcomes

At the completion of this exercise:

More on the Box Model

The following illustration shows the various layers in the box model:

Illustration of the box model, showing (from inside to out) content, padding, border, and margin

The size of each of the layers in the box model can be specified using the usual CSS units of measure (em, %, and px).

For example, consider the following <p>, which is wrapped inside a <div>:

  <div>
    <p>This is a paragraph. It is a very short paragraph.</p>
  </div>

We can apply the following CSS to the paragraph tag in order to control the size of the padding, border, and margin of the paragraph:

  div {
    background-color: red;
    padding: 0;
    border: 1px solid black;
    margin: 0;
  }
  p {
    background-color: white;
    padding: 1em;
    border-width: 10px;
    border-style: solid;
    border-color: blue;
    margin: 10px !important;
   }

Here's what it looks like:

This is a paragraph. It is a very short paragraph.

Here are a few tips:

Activities

Handouts/Online Documents

All done?

Proceed to Lesson 2.