如何删除div中的不需要的空间包装img？

Question

jsfiddle

我：

HTML：

<div> 
    <img src='http://upload.wikimedia.org/wikipedia/commons/7/70/Peace_dove_icon.svg' width='50' height='50'> 
</div> 

CSS：

div{ 
    display:inline-block; 
    position: relative; 
    margin: 0; 
    border: 0; 
    padding: 0; 
    overflow: visible; 
} 

，但如果你检查你的页面应该有希望看到的底部有一个看似随意的5px额外的div标记。

我该如何摆脱这一点？

Answer 1

这是img的后代。图像的行为与单词相同，并位于容器中的基线上，这为下降者留下了空间。

解决方案：给IMG display:block或使用属性，如vertical-align，position或float，哪个适合的情况。

我在这里更新了小提琴 - new one - 但我必须说，在这种情况下没有明显的区别。除了图像以外，屏幕上没有任何东西。

Answer 2

默认情况下，您可以使用vertical-align，图像以内联方式呈现，就像字母一样。

或设置style="display: block;"

Answer 3

只要给DIV这个CSS规则：

height: 50px; 

这里是工作提琴：

http://jsfiddle.net/Hive7/9JU3T/1/

Answer 4

line-height:0;为DIV解决了这个问题，太！