Using Shorthand Margins and Padding

Margins create space between the edge of an element and the edge of any adjacent elements. Padding creates the space between the edge of the element and its content (see Lesson 5, "Getting to Know the CSS Box Model," for more information). The margin and padding shorthand properties also can be used to make CSS code more concise.

The margin property can combine margin-top, margin-right, margin-bottom, and margin-left. The padding property can combine padding-top, padding-right, padding-bottom, and padding-left.

The margin and padding properties also can be used to style different values for each side of an element. Values are applied in the following order: top, right, bottom, and leftclockwise, starting at the top.

The <p> element can be styled with padding-top, padding-right, padding-bottom, and padding-left as shown in Listing 2.16, or with a single padding property as shown in Listing 2.17.

Listing 2.16. CSS Code Highlighting All `padding` Properties

h1, h2
{
    text-align: center;
    color: navy;
}

h1
{
    border: 1px solid gray;
}

h2
{
    font: italic small-caps bold 100%/120% arial, helvetica,
sans-serif;
}

p
{
    color: maroon;
    font: 80% arial, helvetica, sans-serif;
    padding-top: 1em;
    padding-right: 2em;
    padding-bottom: 3em;
    padding-left: 4em;
}

Listing 2.17. CSS Code Highlighting a Shorthand `padding` Property

h1, h2
{
    text-align: center;
    color: navy;
}

h1
{
    border: 1px solid gray;
}

h2
{
    font: italic small-caps bold 100%/120% arial, helvetica,
sans-serif;
}

p
{
    color: maroon;
    font: 80% arial, helvetica, sans-serif;
    padding: 1em 2em 3em 4em;
}

You can use one, two, three, and four values within a shorthand declaration.

The declaration p { padding: 1em; } will apply 1em of padding to all sides of an element.

The declaration p { padding: 1em 2em; } will apply 1em of padding to the top and bottom, and 2em of padding to the left and right of an element.

The declaration p { padding: 1em 2em 3em; } will apply 1em of padding to the top, 2em of padding to the left and right, and 3em to the bottom of an element.

The declaration p { padding: 1em 2em 3em 4em; } will apply 1em of padding to the top, 2em of padding to the right, 3em of padding to the bottom, and 4em of padding to the left of an element .

Table of Contents

Using Shorthand Margins and Padding