html - HTML <small> 标签如何影响 CSS line-height 属性？

Question

第一个li的高度是45px。第二个 li 是 46px。为什么？

div {
  height: 45px;
  line-height: 45px;
  background-color: #b6ff00;
}
li {
  line-height: 45px;
  list-style: none;
  float: left;
}
li > a {
  width: 200px;
  line-height: inherit;
  display: block;
  text-decoration: none;
  background-color: #ff6a00;
}
li:first-child > a {
  background-color: #00ffff;
}

<div>
  <ul>
    <li>
      <a href="#">dfdd</a>
    </li>
    <li>
      <a href="#"><small>sdaf</small>abc</a>
    </li>
  </ul>
</div>

Answer 1

另一个解决方案正在改变display:block;至 display:flex;对于 <a>标签。

div {
  height: 45px;
  line-height: 45px;
  background-color: #b6ff00;
}
li {
  line-height: 45px;
  list-style: none;
  float: left;
}
li > a {
  width: 200px;
  line-height: inherit;
  /* REMOVED */
  /*display: block;*/
  display: flex; /* added*/
  text-decoration: none;
  background-color: #ff6a00;

}
li:first-child > a {
  background-color: #00ffff;
}
  

<div>
  <ul>
    <li>
      <a href="#">dfdd</a>
    </li>
    <li>
      <a href="#"><small>sdaf</small>abc</a>
    </li>
  </ul>
</div>