Architekt Architekt - 5 months ago 8
CSS Question

Why is my <a> tag is inheriting 'display:block' in one set of code, but not the other?

I was fiddling around with creating some headers with a navigation. More specifically I was trying to create the nav links so that they would have padding so that the surrounding area would be clickable, and not just the text itself.

Usually in order to get this sort of behavior you need to apply padding to the

a
tag and use the
display: block
property:

li a {
display: block;
padding: 10px 15px;
}


In my codepen that I have here I am able to achieve the clickable surrounding without applying
display: block
. However in this here similar piece of code that I found off the internet, you must have
display: block
in order to get the padding area to be clickable, or even show.

Why do I not need to insert the
display: block
property in the first codepen link? Is it inheriting that property from li? If so, why is the second set of code not inheriting it?

Answer

You don't necessarily HAVE to add display:block to the a in order to achieve the desired effect. An inline element can handle padding just as a block can.

Example:

div{
  background:red;
  padding: 10px;
  margin-bottom:20px;  /* just for visual purpose */
}

span{
  background:lightblue;
  padding: 10px;
}
<div>Block</div>
<span>Inline</span>

The difference between the two Codepen examples you provided is that in the second one, the ul is hiding the link's padding by enforcing an overflow: hidden style.

Removing that overflow style from the ul will allow the a tags (links) to visibly show the padding that they have.