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

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

我怎样才能摆脱这个？

score 1 · Accepted Answer

它是img的下降器。图像的行为类似于文字，位于容器的基线上，这为下降者留下了空间。

解决方案：给出 imgdisplay:block或使用vertical-align,position或之类的属性float，以最适合情况的为准。

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

score 0 · Accepted Answer

0

line-height:0; for the div solves the problem, too!

于 2013-08-31T13:14:34.927 回答

score 0 · Accepted Answer

默认情况下，您可以使用垂直对齐，图像被内联渲染，就像一个字母。

或设置style="display: block;"

score 0 · Accepted Answer

只需给 div 这条 CSS 规则：

height: 50px;

这是一个工作小提琴：

4 回答 4