CSS Shorthand at a Glance - Padding shorthand property

(Page 6 of 8 )

The "padding" shorthand property syntax is similar to that specified for margins:

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

Padding properties set the size of the padding between the inside of an element’s border (if any) and the element itself.

Here are some examples:

p {

     padding: 10px;

}

p {

     padding: 10px 20px;

}

p {

     padding: 10px 20px 10px;

}

p {

     padding: 10px 20px 10px 20px;

}

Similar to margin properties, when only one value is given for the element, that value will be applied to each padding, in the following manner: "padding-top," "padding-right," "padding-bottom" and "padding left."

Taking a look at the second example, two values are defined. CSS will give the first value for "padding-top" and "padding-bottom." The second value will be assigned for "padding-right" and "padding-left."

The third example defines three padding values for the element. They will be evaluated by assigning the first value for "padding-top," the second for "padding-right," and the last for "padding-bottom."

Finally, our fourth example, with four padding values specified, will assign the values in a clockwise direction: "padding-top," "padding-right," "padding-bottom," and "padding-left" respectively.

Next, we will work with borders. Let’s take a look at the "border" shorthand property.

Next: Border 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!