那2px是哪里来的

Question

<div id='box'>
    <a href="">
        应用
        <em class='arrow'></em>
    </a>
</div>



body{
    font-size: 12px;
}
*{
    margin: 0;
    padding: 0;
    outline:0;
}

为什么div的高度会是14px；照理说不应该是12px，多出来的2px是哪里来的？

Answer 1

代码不贴全，差评。
Chrome里测试了下，DIV确实是14px，加了下面几句也没用，还是14px。

border-style:none;
border:0;
overflow:hidden;

其实没有什么“照理说”，不强行设置高度，你就没办法确定高度的，别忘了浏览器自己也有默认的样式。
前端总是各种不确定，我都习惯了。
你要是界面设计有强迫症，你就给个height，你要是需要用到这个高度值，你就JS获取。
不要纠结于这些细节好嘛。
实测，加上下面这一句，就是12px无疑了，2333。

height:12px;

Answer 2

line-height: 1;

这句完破

Answer 3

看看，默认行高

Answer 4

div的高度不是由内容高度确定的，而是由line-height确定的。你若设置line-height为0，div高度就是0，但里面的文字还是正常显示的。