html - DIV 高度似乎太大

Question

我在这里有一个 jsfiddle - http://jsfiddle.net/stevea/Jpu5b/2/ - 一个 DIV 包含另一个包含 img 的 DIV。我没有指定内部 DIV 的宽度或高度，因此它采用父 DIV 的宽度和它包含的 img 的高度。

<div id='box'>
    <div id='innerBox'> 
            <img id='cateye' src='http://s20.postimg.org/ddh45wqnd/t_cateye.jpg'/>
     </div> 
</div>

我的问题是，为什么内部 div 的高度比它包含的 img 大 5px 左右？

Answer 1

如果您想将 img 保留为内联元素，只需添加line-height: 0;到您的重置中。

所以它看起来像这样：

 * {
    margin:0px;
    padding:0px;
    line-height: 0;
}

这是更新的小提琴http://jsfiddle.net/Jpu5b/18/

否则迈克尔圣克莱尔斯的回答会很好。

Answer 2

添加此代码，它应该修复它

#cateye {
    display:block;
}