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 CSS Layout Basics Controlling Layout with CSS Display Modes Positioning Elements Side-By-Side with Inline Display

Ashim Poudyal
seal-mask
.a{fill-rule:evenodd;}techdegree
Ashim Poudyal
Full Stack JavaScript Techdegree Student 5,824 Points
Posted by Ashim Poudyal
.a{fill-rule:evenodd;}techdegree
Ashim Poudyal
Full Stack JavaScript Techdegree Student 5,824 Points

Question about .main-nav a and .main-nav li

what is the difference between listed rules below:

.main-nav a{ padding: 15px; }

.main-nav li{ padding: 15px; }

I understand <a> and <li> tags are inside of main-nav and from my understanding they should give same result but outcome is different. I would appreciate if anybody could help me with this. Thank you!

<header class="main-header"> <div class="container"> <h1 class="name"><a href="#">Best City Guide</a></h1> <ul class="main-nav"> <li><a href="#">ice cream</a></li> <li><a href="#">donuts</a></li> <li><a href="#">tea</a></li> <li><a href="#">coffee</a></li> </ul> </div> </header>

Thank you for any help.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Michele Smolensky — excellent reply, why not post it as an answer instead of a comment? That would allow for voting and for Ashim to possibly mark it as "best answer". If I were a moderator, I would promote it for you.

1 Answer

Michele Smolensky
Michele Smolensky
9,261 Points

Reposted as an answer:

So the reason .main-nav a and .main-nav li look different when using padding is their default display properties. Anchor tags are inline by default, which means you can add padding to the left and right, but not to the top and bottom without changing the display property to either inline-block or block. List items on the other hand have a default display of "list-item", which is a block-level item, allowing padding all around the element.

(Sorry this was my first time on the community page and didn't realize there was a difference!)

Andrea Scianna
Andrea Scianna
11,928 Points

Yes, but it the example, the display properties of li elements is set to inline into the media queries rule: .name, .main-nav, .main-nav li { display: inline; }.

So why padding apply to li ?