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?