ASCII複選標記字符導致不完美的框

Question

看起來ASCII字符✓（複選標記）正在引發問題。你可以在這個例子中看到：https://jsfiddle.net/2d3dqtdz/第二個盒子有點小。

現在考慮更改✓字符，如•（點），你可以看到這個盒子是完美的。

如何在使用複選標記ASCII字符時使盒子看起來很完美？

Answer 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>