ASCIIチェックマーク文字が原因で不完全なボックスが発生する

Question

ASCII文字の✓（チェックマーク）が問題を引き起こしているようです。この例では、https://jsfiddle.net/2d3dqtdz/の2番目のボックスが少し小さくなっています。

•（ドット）のような文字で✓を変更すると、ボックスが完璧であることがわかります。

チェックマークASCII文字を使用すると、ボックスを完全に見えるようにするにはどうすればよいですか？

Answer 1

1つの解決策は、要素にline-heightを割り当てることです。

.box { 
 
    border: 5px solid #000; 
 
    display: inline-block; 
 
    line-height: 1em; 
 
}

<div class="box"> 
 
    &#x2713; test 
 
    <br />&#x2713; test 
 
    <br /> 
 
</div> 
 

 
<div class="box"> 
 
    &#x2713; test 
 
    <br /> 
 
    <br /> 
 
</div> 
 
<div class="box"> 
 
    &#8226; test 
 
    <br /> 
 
    <br /> 
 
</div>