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 How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Stephon Nixon
PLUS
Stephon Nixon
Courses Plus Student 506 Points

What is the purpose of the 15px in the CSS code "padding: 15px 10px;?"

I played around with the 15 and increased it to as high as 1500 px and nothing changed. Just to be clear this is the CSS for "nav a".

padding 15px here is for top and bottom & 10px for left and right and if u are not getting any change make sure you give nave a property display:block;

3 Answers

Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey Stephon,

if you write the value of the padding property with two values it's a shorthand value to define the padding-top and padding-bottom value with the first value, so in this case padding-top and padding-bottom will be 15px and padding-left and padding-right with the second value which means that padding-left and padding-right will have a value of 10px. I hope that helps! :)

Stephon Nixon
PLUS
Stephon Nixon
Courses Plus Student 506 Points

Thank you guys. I actually see what the issue was. It was inline-block (as instructed) it seems that first number wasn't really making a change. I added another display property and set the value to block like Liam said, that's when the first number started to make a difference. I find it strange because it was originally "inline-block" which should be like a mix of both.

Tobias Helmrich
Tobias Helmrich
31,602 Points

Alright, glad you got it working! :) However I want to note that if the anchor is an inline-block element it should actually work because you can give a padding/margin-top to an inline-block element. Are you sure that your anchor was an inline-block element and not just the list item?

Stephon Nixon
PLUS
Stephon Nixon
Courses Plus Student 506 Points

Ahhhhhhhh. You're right Tobias, only the list item was inline-block