CSS Shorthand at a Glance - Margin shorthand property

(Page 5 of 8 )

The syntax for the "margin" shorthand property is the following:

margin: margin-top | margin-right | margin-bottom | margin-left;

Margin properties set the size of the margin between the outside of an element’s border and surrounding page elements. Let’s list some examples for proper understanding:

h2 {

     margin: 5px;

}

h2 {

     margin: 5px 20px;

}

h2 {

     margin: 1em 2em 4em;

}

h2 {

     margin: 5px 20px 5px 20px;

}

In the first example, all of the margins for the <h2> element are set to 5px. In the case where only one value is specified, it will be applied to all sides of the element. In the second example, where only two values have been specified, CSS interprets the first as being the value for the horizontal margins, that is, those at the top and bottom of the element. The second value defines the right and left margin sizes for the element.

In the third example, where three values have been defined, the first value is set to "margin-top," the second is set to "margin-right" and the third is set to "margin-bottom," respectively.

When four margin values are defined for the element, they’re automatically applied to the borders, moving around the element in a clockwise direction, that is top, right, bottom and left, respectively.

Let’s see another interesting shorthand property, which consists of using padding.

Next: Padding shorthand property >>
 

More Style Sheets Articles
More By Alejandro Gervasio

Comments On: CSS Shorthand at a Glance

·  Here's a tight reference about the most common CSS shorthand properties,...    · I always thought this stuff was common sense...Guess I took it for granted... I...    ·  I agree with you about writing clean CSS code. That's the right way to...    · The correct explanation for three shorthand values is:"If there are three...    · Yes, that's correct. Thanks for pointing out that small error.   >>> Post your comment now!