为什么<li>元素包含<a> element with 15px padding not as big as the </a> <a> element?

Question

Why is the <li> element that contains <a> element with 15px padding not as big as the <a> element? Shouldn't it have height equal to that of the <a> element?

The <a> element has a height of 47px if we include the padding, however, the parent <li> element only has 18px. Shouldn't it have 47px height as well?

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
a {
    color: white;
}
ul {
  list-style-type: none;
  background-color: black;
}
ul li {
  display: inline-block;
}
ul li a {
  padding: 15px;
}

<ul>
  <li><a href='#'>Hey</a></li>
  <li><a href='#'>Hey</a></li>
</ul>

Answer 1

因为您需要为display: block元素设置a。

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
a {
    color: white;
}
ul {
  list-style-type: none;
  background-color: black;
}
ul li {
  display: inline-block;
}
ul li a {
  padding: 15px;
  display: block;
}

<ul>
  <li><a href='#'>Hey</a></li>
  <li><a href='#'>Hey</a></li>
</ul>