CSS Lesson 5: Understanding The Box Model Part 2: Margin

by Brad on January 25th, 2010

As you begin designing layouts with CSS you will inevitably need to create spacing between elements; thus, today’s lesson is regarding the “margin” property. Let’s begin with a quick image to illustrate the margin property in action:

CSS Margin Graph

Margin is space added to the outside of an element (past the element’s edge, or border). In some instances, Padding and Margin can be used to achieve a similar affect, but it’s important to understand the difference. Padding adds space to the inside of an element, while margin adds space to the outside of an element.

Let’s code a simple example of margin in action. Begin with the following HTML code, and place it in a blank XHTML starter file.

<div id="box-a">
<p>Box A</p>
</div>

<div id="box-b">
<p>Box B</p>
</div>

Next, let’s give these two boxes a width, background-color, a border and padding. Add the following code to your CSS file:

#box-a {
    width: 300px;
    padding: 15px;
    background-color: orange;
    border: 1px solid black;
}

#box-b {
    width: 300px;
    padding: 15px;
    background-color: gray;
    border: 1px solid black;
}

When viewed in a web browser, our example should look like this:

CSS Margin screenshot

Now imagine we want to create 10 pixels of spacing between the two boxes. We would achieve this by adding bottom-margin to box-a:

#box-a {
    margin-bottom: 10px;
    width: 300px;
    padding: 15px;
    background-color: orange;
    border: 1px solid black;
}

When refreshed in our web browser, our page should now look like this:

CSS Margin Screenshot 2

You may wonder, “Could we have also added margin-top to box-b?” Let’s do that now; let’s double the space between the boxes by adding another 10 pixels of margin to box-b:

#box-b {
    margin-top: 10px;
    width: 300px;
    padding: 15px;
    background-color: orange;
    border: 1px solid black;
}

When you refresh the page in your web browser, you’ll notice that the spacing didn’t double; it stayed exactly the same. This is because two margins are touching, so one collapsed. Essentially, when two margins touch the larger margin is used, and the smaller disappears (or collapses).

To fully illustrate this point, let’s change the margin-top of box-b from 10 pixels to 11. When we refresh the page in our web browser we’ll notice that the spacing hasn’t ballooned to 21 pixels, but instead has increased by only one pixel.

CSS Margin Screenshot 3