Using display: block with anchor tag

Question

I have written this simple CSS. I am trying to understand why when I put display: block in the anchor tag, the width of the tag becomes the same as the <li> item. When I remove display: block, however, the width of the anchor tag is same as the text in it, as one would expect

#menu ul {
  margin-left: -2.5em;
}

#menu li {
  list-style-type: none;
  border: 2px black solid;
  background-color: gray;
  width: 20%;
  text-align: center;
  float: left;
}

#menu a {
  text-decoration: none;
  color: black;
  background-color: #EEEEFF;
  box-shadow: 5px 5px 5px gray;
  margin-bottom: 2px;
  margin-right: 2px;
  display: block;
  border: 3px solid #EEEEFF;
}

<div id="menu">
  <ul>
    <li> <a href="#"> Google </a> </li>
    <li> <a href="#"> Yahoo </a> </li>
  </ul>
</div>

Answer 1

The display block will set as default width: 100%, if you wanna change it define the width in the css code.

When you remove the display: block in your code your anchor will use its default display: inline.

If you wanna use display: block and see your element like inline you can use display: inline-block;