Home arrow Style Sheets arrow Page 5 - CSS Shorthand at a Glance
STYLE SHEETS

CSS Shorthand at a Glance


What could be simpler and faster than using CSS to set up your website? Using CSS shorthand to set up your website. While not all browsers support all of CSS shorthand's features, enough of them are supported to allow you to write tighter code, and create a website that loads more quickly.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
February 08, 2005
TABLE OF CONTENTS:
  1. · CSS Shorthand at a Glance
  2. · Basic CSS rules
  3. · Font shorthand property
  4. · Background shorthand property
  5. · Margin shorthand property
  6. · Padding shorthand property
  7. · Border shorthand property
  8. · List-style shorthand property

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 5 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials