Question

我有：

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;

这是一个工作小提琴：

Answer 4

div的

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