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

Posted by L S
L S
689 Points

What if you included the formatting for the nav li a inside the nav li?

All of the nav li are anchor elements anyway. Why do there need to be separate selectors for the different features?

Matthew Orndoff
Matthew Orndoff
9,018 Points

Well for one thing, list items (li) span the width of their container element. So if all you wanted was to apply a style to an anchor element, but you targeted the list item instead and called it good, you'll be selecting more than you bargained for.

Check out this example on codepen I threw up to see what I mean.

L S
L S
689 Points

Thank you! Also, thanks for the link to codepen. It's really helpful with experimenting.

So then... why when I make the padding on the li container 1%, things fit in a neat, single line (http://codepen.io/anon/pen/raVaMM). But the moment you change it to anything else (2%, even), it splits into an awkward multi-line entity.

The padding of the link itself increases pretty dramatically with each increasing percentage point. But I thought the list item was the parent of the link? What is defined as 100% height for the link, if not the list? When I make them 100%, the two elements do not become the same length. This is weird... any ideas why? Thanks again!

anish sebastian
anish sebastian
10,565 Points

Awesome job with the codepen example matthew!

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

As Matthew alludes to, list items (li elements) are block-level elements by default (taking up 100% of the width of their parent container), while anchors (a elements) are inline elements by default, and don't have a specific width or height (it is determined by their contents).

As for the padding issues... the parent of the list items is the unordered list itself (ul element), which is also a block element.

In your example, the unordered list is taking up 100% of the width of its container, a div element. Divs, and the HTML5 element nav are also block elements, so essentially, everything from the list out/up is taking up the full-width, and the list items are basing the padding percentage on its parent. So the padding: 1% is 1% of CodePen's preview window. If you go really wide, you'll see what I mean.

The padding of the anchor elements is based on the width of the list items. Try adding a fixed pixel width to the list items to see how it affects the padding on the anchors.

It's because of this that you'll often see padding specified in em or px amounts, since it won't fluctuate as much. The exception to this is when a layout is designed to be 'fluid', resizing and changing for any given browser/viewport width.

There's often many different ways to achieve the same effect in CSS, don't be too concerned, just keep experimenting and learning!