CODEWITHSUNDEEP
htmlcssscrollbaroverflow
Misha Moroshko
Misha Moroshko

Reputation: 171321

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)

Upvotes: 0

Views: 247

Answers (4)

alex
alex

Reputation: 490153

Add display: block to the img.

See it.

Upvotes: 0

Turnor
Turnor

Reputation: 1856

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.

Upvotes: 2

Pat
Pat

Reputation: 25675

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.

Upvotes: 1

Razor Storm
Razor Storm

Reputation: 12326

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

padding: 0px;

Upvotes: -1

Related Questions