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

Posted by Adam Akers
Adam Akers
7,357 Points

I am getting Block behavior without specifying so in my <a> tag. Why is this?

I'm working on creating a navigation bar and noticed something. My <a> tags have block behavior and have somehow inherited it without me specifying so in the stylesheet. I have tried this on my project I am working on and in a codepen and have gotten the same results. Anyone know why this is happening?

http://codepen.io/MrAdam/pen/JKRVGv

Also, <header> is a block level element, so why should I have to set the width to 100%? Shouldnt it expand to 100% on its own?

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I didn't notice any "block behavior" in your links in the codepen sample. Perhaps you could explain what you mean by that?

I also didn't see any "header" element. But I tried adding one, and sure enough, it stretched all the way across the window without any explicit size setting. Perhaps you had put one inside a containing element?

Adam Akers
Adam Akers
7,357 Points

Basically what I am trying to achieve is to create links that have some padding around them and have that area clickable so the user doesn't have to select just the text to navigate to the next page. Right now my codepen is doing just that, however, usually in order to do so, the '''li a''' selector must have '''display: block;''' in order for the link to fill up the padding. A good example of what I am referring to can be found here. Under their '''li a''' selector they have the '''display: block''' property and when that section is commented out the background shrinks and you are unable to click in the background.

I am wondering why my code does this without having to insert '''display: block''' in the a tag. Hopefully I explained that better a second time

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The primary difference is that in the new example. the ul has the property "overflow: hidden". This trims off the vertical padding when the link elements are not in block mode.

Adam Akers
Adam Akers
7,357 Points

weird. I always thought that <a> tags needed to be set to block in order for that padding space to be clickable as well. Some tutorials mention to do that, so I guess that's where I picked it up. Thanks for the help!