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

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;
}

但是，如果您检查页面，您应该希望在div标签的底部看到一个看似任意的5px多余部分。

我该怎么摆脱这个？

它是img的后代。图像的行为就像单词一样，位于容器中的基线上，这为它们下面的后代留出了空间。

解决方案：给img display:block或使用vertical-align、position或float等属性，以最适合情况的为准。

我更新了小提琴——这里是新的——但我必须说，在这种情况下没有明显的区别。屏幕上除了图像什么都没有。

您可以使用垂直对齐，因为默认情况下，图像以内联方式呈现，就像字母一样。

或设置style="display: block;"

只需给div这个css规则：

height: 50px;

这是一把工作小提琴：

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

div的line-height:0;也解决了这个问题！

相关内容