Search code examples
htmlcssheight

Why do some characters change the overall line height, and how can this be fixed?

For some reason, when using some characters, the indentation of the line height changes:

div {
 width: auto;
 margin: 8px;
 padding: 8px;
 display: inline-block;
 border: 1px solid blue;
}

.box {
 width: 22px;
 height: 22px;
 color: green;
 text-align: center;
 display: inline-block;
 background-color: #eee;
 border: 1px solid red;
}
<div><span class="box">☉</span> foo</div><br>
<div><span class="box">&bull;</span> foo</div>

Result

In this picture, you can see that there is a one pixel difference.

I have looked through many CSS properties but could not find any that could initially specify the desired indentation.

Solution

  • You can define the line height manually:

    .box{
  line-height: 24px;
}