htmlcssfont-size

How can HTML <small> tag affect the CSS line-height property?

First li's height is 45px. Second li's one is 46px. Why? 

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>

Solution

  • Another solution is changing display:block; to display:flex; for <a> tag.

    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>