为什么滚动条出现在我的图像元素上？

Question

我有以下简单代码：

HTML：

<div>
    <img src='http://i51.tinypic.com/4kz4g5.jpg' />
</div>

CSS：

div {
    width: 260px;
    height: 195px;
    overflow: auto;
    background: #333;
}

图像的尺寸为

width=260px, height=195px

，与

div

的尺寸完全相同。

我的问题是为什么在这种情况下会出现滚动条？ （我希望它们仅在图像尺寸大于

div

的尺寸时才会出现）

Answer 1

这是由于 img 是内联标签，所以它为文本的上升部分和下降部分留出了空间。将 img 设置为

display: block

即可正常工作。

Answer 2

这是因为在您的

<div>

中插入了一个空文本节点，并添加了足够的空间来需要滚动条。您可以使用以下 CSS 修复它：

div {
    width: 260px;
    height: 195px;
    overflow: auto;
    background: #333;
    font-size: 0;
    line-height: 0;
}

在这里行动。

Answer 3

将

display: block

添加到

img

。

看到它。

Answer 4

Div 默认情况下有填充值，您应该将它们设置为 0。

padding: 0px;