DIV高度似乎太大了

Question

我在这里有一个jsfiddle - http://jsfiddle.net/stevea/Jpu5b/2/ - 一个包含另一个包含img的DIV的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/

否则Michael St Clairs的回答会很好。

Answer 2

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

#cateye {
    display:block;
}