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

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 «s)

Answer 1

Это связано с тем, что img является встроенным тегом, поэтому он оставляет пространство для подписи текста и descenders. Установите img на display: block, и он будет работать правильно.

Answer 2

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

padding: 0px; 

Answer 3

Это потому, что пустой текстовый узел вставляя в ваш <div> и добавляя достаточно места, чтобы требовать полосы прокрутки. Вы можете исправить это с помощью следующего CSS:

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

In action here.

Answer 4

Добавить display: block в img.

See it.