Margins

Margins

Margins can be applied to the outside of any block level or inline element. They create space between the edge of an element and the edge of any adjacent elements.

Margins can be applied to individual sides of a box as shown in Listing 5.1.

Listing 5.1. CSS Code Containing Various margin Properties

p { margin-top: 0; }
p { margin-right: 2em; }
h2 { margin-bottom: 3em; }
h3 { margin-left: 1em; }

Margins also can be applied using a single shorthand property. If one margin value is specified, it applies to all sides of an element as shown in Listing 5.2.

Listing 5.2. CSS Code Containing the margin Shorthand Property with One Value Specified

p { margin: 1em; }

If two values are specified, the top and bottom margins are set to the first value and the right and left margins are set to the second as shown in Listing 5.3.

Listing 5.3. CSS Code Containing the Shorthand margin Property with Two Values Specified

p { margin: 1em 0; }

If three values are specified, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third as shown in Listing 5.4.

Listing 5.4. CSS Code Containing the Shorthand margin Property with Three Values Specified

p { margin: 1em 0 2em; }

If four values are specified, they apply to the top, right, bottom, and left as shown in Listing 5.5.

Listing 5.5. CSS Code Containing the Shorthand margin Property with Four Values Specified

p { margin: 1em 2em 2em 1em; }