为什么会出现滚动条？

Question

我有the following simple code：

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

In action here

Answer 3

将display: block添加到img。

See it

Answer 4

Divs默认具有填充值，您应该将它们设置为0.

padding: 0px;