Why scroll bars appears ?

Question

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

The dimensions of the image are width=260px, height=195px, which is exactly like the dimensions of the div.

My question is why the scroll bars appears in this situation ? (I expect them to appear only if image dimensions are greater of div's dimensions)

Answer 1

Divs by default have padding values, you should set them to 0.

padding: 0px;

Answer 2

It's because an empty text node is being inserted in your <div> and adding just enough space to require scrollbars. You can fix it with the following CSS:

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

In action here.

Answer 3

It's due to the fact that img is an inline tag, so it leaves space for text ascenders and descenders. Set the img to display: block and it'll work correctly.

Answer 4

Add display: block to the img.

See it.