Home arrow Style Sheets arrow Page 6 - CSS Shorthand at a Glance

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 / 32
February 08, 2005
  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

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.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- 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...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


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