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 CSS Layout Project Creating and Styling the Layout Containers

Posted by Alan White
Alan White
7,096 Points

Why do we target "name a" and "main-nav a" instead of "name" and "main-nav li" with the block and padding?

Why do we target "name a" and "main-nav a" instead of "name" and "main-nav li" with the block and padding in the stylesheet?

3 Answers

Balazs Peak
Balazs Peak
46,160 Points
Balazs Peak
Balazs Peak
46,160 Points

Here the instructor decided to target the anchor elements to give them padding, instead of adding another div element to wrap around it. But since the anchor elements are inline elements by default, he changed them to be block elements.

Other solutions would be also acceptable, this architecture is not written in stone, although it's good to keep in mind that the instructor is an experienced developer and he might have tried out many different approaches before.

Mia Filisch
Mia Filisch
16,117 Points
Mia Filisch
Mia Filisch
16,117 Points

Setting an <a> element's display value to block makes its hover area expand within its parent, which is nicer for clickability. I think this might be the main reason why he's targetting the a tags, as opposed to name and main-nav li.