When working with css you work with values to set how the different elements are displayed such as font sizes, line heights etc.

There is a elements where you apply more than one number such as padding, margins, border elements and such. These elements are applied clockwise starting at the Top, Right Bottom Left a good way to remember this is TRouBLe using this method will keep you out of trouble.

Let me explain how this works, generally you would have something similar as this.

.box {
border: 4px solid #000000;
padding: 5px 10px 15px 20px;
margin: 10px 20px;
}

In this example a box would be displayed where ever you place this class with a black 4 pixel (px = pixel(s)) border on all sides, different padding on 4 sides and similar margins.

Since the border is the same on all 4 sides we only have to list that once because it is implied that you want the same width all around.

However on the padding for this example we have different padding levels all around 5px on Top, 10px on the Right, 15px on the Bottom and 10px on the left.

Finally for the margin element we have only two settings this is because if you want the same settings for the opposite side it is assumed by listing once so in this case Top & Bottom would be 10px and left and right would be 20px.

If you were to use 3 elements it would assume the first as the top the 2nd as left and right and the 3rd element as the bottom value.

I hope you found this useful. I will be teaching more about css and other page elements in my new upcoming course Web Page Secrets Revealed

Until next time I wish you all the best and much success in everything you do.

Frank Deardurff – That One Web Guy!

1 Comment

  1. Karen Brunet - ESS on September 24, 2008 at 3:52 pm

    Frank, thanks for the tip. I usually just let Dreamweaver do the CSS coding so I hadn’t really thought about it. But this will certainly come in handy reading stylesheets in the future and make CSS editing easier.

    Keep these tips going. I love them.

    Karen Brunet
    ESS – It’s not just a website…
    It’s the Mother Lode!

Leave a Comment