Почему полосы прокрутки появляются?

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

У делений по умолчанию есть значения заполнения, вы должны установить их на 0.

padding: 0px;