HTML Introduction to HTML and CSS Make It Beautiful With CSS Select and Style Multiple Elements by Class

I probably will badly ask this question, but what are the different directions that the padding is appied?

What I'm asking about is specifically this:

CSS
paddding: 10 px 11 px 12 px 13px;

So what direction does each of the 4 pixel designations represent between top, bottom, left, and right?

With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

http://www.w3schools.com/css/css_padding.asp

3 Answers

Jacob Herrington
Jacob Herrington
15,835 Points

The rule starts at the top and goes clockwise around the object. If you supply only two arguments the first argument is applied both to the top and bottom of the object and the second is applied to both sides of the object.

.class {
  padding: top right bottom left /* with four arguments */
}

.class {
  padding: top/bottom left/right /* with two arguments */
}

The same method is used for margin.

edit: fixed order, answer was wrong

Yevgeniy Alexeyev
Yevgeniy Alexeyev
3,591 Points

Tiny correction.

Top - Right - Bottom - Left

TRouBLe :)

Jacek Wozniak
Jacek Wozniak
4,476 Points

Like everyone above already replied, the padding order is: Top Right Bottom Left

It's also worth pointing out that the code you posted is wrong:

paddding: 10 px 11 px 12 px 13px;

In CSS unit has to follow the value and there should be no space between. Here's the correct version:

paddding: 10px 11px 12px 13px;

With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

http://www.w3schools.com/css/css_padding.asp