Search code examples
htmlcsswebstylesheet

CSS , why adress the "nav a" and not the "li"?

I have a tutorial, where the following CSS is used to separate list items from each other.

But why do I adress the nav a and not the li ? Can someone tell me a proper reason to not define the padding in li? It has a similar effect. 

main-header .header-logo {
  float:left;
}

.main-header nav {
  float: right;
}

.main-header ul {
  list-style: none;
}

.main-header li{
  float:left;
}

.main-header nav a {
  padding: 20px;
}
<div class="container">
  <div class="main-header-container">
    <header class="main-header clearfix">
      <a class="header-logo" href="index.html"><h1>ContactFile</h1></a>
      <nav>
        <ul class="header-main-menu clearfix">
          <li><a href="contact.html">contact</a></li>
          <li><a href="contact2.html">contact2</a></li>
          <li><a href="contact3.html">contact3</a></li>
          <li><a href="contact4.html">contact4</a></li>
        </ul>
      </nav>
    </header>
  </div>
</div>

Solution

  • Everything will work perfect if you apply styles to li but consider you give a padding to a lielement instead of a. It will create this type of effect where only text will be clickable as a link while all the other space will be unclickable as it will be li not a Image