Question

I’m fairly new to CSS. I’ve been studying on how to put up a horizontal menu with CSS by the given example. The html source code is as follows:

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

and the style sheet is as below.

    body {
      background-color: #000;
    }

    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
      background-image: url(navi_bg.png);
      height: 80px;
      width: 663px;
      margin: auto;
    }

    li {
      float: left;
    }

    ul a {
      background-image: url(navi_bg_divider.png);
      background-repeat: no-repeat;
      background-position: right;
      padding-right: 32px;
      padding-left: 32px;
      display: block;
      line-height: 80px;
      text-decoration: none;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 21px;
      color: #371C1C;
    }

    ul a:hover {
      color: #FFF;
    }

All this code display the horizontal menu perfectly, but I don’t quite understand on how it is organized.

My question is: why do we need to set the display property of the anchor that is contained in the <li> tag to “block”? I learned that the anchor tag itself is inline element naturally. Does this mean by doing so it give the anchor tag ability to be displayed as block? So, I we can treat them as block in setting background and padding?

any help would be very much appreciated.

Answer 1

Adding display:block to the <a> element is not mendatory, but one advantage of it is it will take the full size of his parent (<li>) if you specify one (specially the height).

Also, since you’re applying a background to the link, it’s always a good thing to display it as a block, since most of the time you need to specify an height.