CSS Trouble Tip

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!