Search code examples
htmlcssscrollbaroverflow

Why do scroll bars appear on my image element?

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)

Solution

  • 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.