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

Question

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.

Answer 1

You can define the line height manually:

.box{
  line-height: 24px;
}