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

CSS Treehouse Club: CSS My First Web Page Introduction to My First Web Page

Posted by Eni Begotaraj
Eni Begotaraj
13,723 Points

padding meaning for the second value...

Hello guys. The problem that i am facing is on style.css, on padding, when i put after numbers px. So for example im putting: padding: 20px 50px; When i change the first number and go to preview page, refresh, i see the change that is about the image moving up and down, but when i change the second number and go to preview, refresh, i dont see the changes. For what is standing the second number on padding and whats the problem when i change it i dont see anything. A bit long for such an easy question. Sorry!

1 Answer

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi,

maybe the problem is in the shorthand version of the padding property that is "padding:". With this shortend version if you declare only one value it apply for every side of it:

.your-class {
  padding: 20px; /* apply padding top, right, bottom, left */
}

If you declare two values:

.your-class {
  padding: 20px 50px; /* the first value apply for top and bottom, the second value apply for left and right */
}

with three values:

.your--class {
  padding: 20px 50px 20px; /* the first value apply for top, the second value apply for left and right, the third value apply for bottom */
}

with four values:

.your--class {
  padding: 20px 50px 20px; /* apply value in clockwise order: top, right, bottom, left */
}
Eni Begotaraj
Eni Begotaraj
13,723 Points

Thank you and i appreciate you for this answer.

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Glad that I helped you! Happy coding!