JSFiddle - React, Tailwind, and code Playground

by Shashank Obulampalli

HTML

<div class="body">
     <div class="why-not-twenty-px">
        containing div has height 
         <span class="smaller"> &bull;</span> 
         of 21px, not 20px
      </div>
    <div class="abcd">
        <span>The same problem can </span>
        <span style="vertical-align:middle;color:grey;"> be             replicated </span> 
        <span> while using tags with same font-size and line-height, height will be 21px</span>
      </div>
   <div class="why-not-sixty-px">
    containing div has height of 61 px, not 60px multiline multiline multiline multiline multiline multiline <span class="smaller">&bull;</span> multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline
  </div>
</div>

CSS

body
{
    line-height: 20px;
    font-size: 14px;
}
.smaller
{
    font-size: 12px;/*I prefer to use px over em, same as 0.9em*/
    vertical-align: middle;
    line-height: 12px;/*use any smaller line height compared to siblings*/
}
.abcd span{
    text-decoration: underline;
}