Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by A X
A X
12,842 Points

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?

John Schaub
John Schaub
5,167 Points

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
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
Yevgeniy Alexeyev
Yevgeniy Alexeyev
3,591 Points

Tiny correction.

Top - Right - Bottom - Left

TRouBLe :)

Jacek Wozniak
Jacek Wozniak
4,476 Points
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;
John Schaub
John Schaub
5,167 Points
John Schaub
John Schaub
5,167 Points

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