Learn Web Code

The padding and margin CSS properties are essential in building web layouts.  Since rectangles (block level elements) have four corners, you will frequently need to assign four different padding properties to one element.  If you are a beginner, this is the code you would likely use:

#header {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 6px;
    padding-left: 15px;
}

However, there is a much more efficient (not to mention easier!) way of applying four padding or margin values. Here is your first glimpse of CSS Shorthand in action; the following code achieves the same exact results as the padding example I just provided:

You simply list four values, one directly after the other, and the web browser interprets this as the four (clockwise- top, right, bottom, left) directional values.

Similarly, you can also list two values in a row and the browser will interpret the first to be both top and bottom, and the second value to be both left and right.

Using this new knowledge, let’s imagine we need to add 10 pixels of right margin and 15 pixels of bottom margin to an element. Here’s the code we would use:

#header {
    margin: 0 10px 15px 0;
}

We used the four-value shorthand syntax, and simply included zeroes for the directions (top and left) we didn’t want to apply margin to.

That’s it for today’s lesson. Hopefully your CSS code will be a little cleaner with these simple shorthand methods.

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:

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:

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:

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.

The browser uses the 11 pixel margin of box-b and collapses the smaller 10 pixel margin of box-a.

That’s all for today’s lesson.  To recap, you now know:

• The difference between margin and padding
• How to use margins to create spacing around elements
• How the smaller of two touching margins collapses

Continue to Next Lesson