Why scroll bars appears?

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 wh开发者_Go百科y the scroll bars appears in this situation ? (I expect them to appear only if image dimensions are greater of div's dimensions)

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.

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.

Add display: block to the img.

See it.

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

padding: 0px;