CODEWITHSUNDEEP
htmlcsscross-browserheight
F21
F21

Reputation: 33431

Div gets extra height for no reason

I have some markup like so:

<div class="account-picture">
    <img src="http://i.imgur.com/Mcr3l.png">
</div>

The div needs to be floated left. The image is 128px x 128px.

And some css:

.account-picture{
   float: left;
   background: #FFFFFF;
   padding: 10px;
   border: 1px solid red;
   font-size: 1px;
   overflow: hidden;
}

img{
   border: 1px solid #F8F8F8;
   overflow: hidden;
}

But the problem is there seems to be some extra height assigned to the div. The layout diagrams from firebug are as follows: enter image description here

Why is the height of the div getting 2 extra pixels? Why does it vary across browsers?

And here's a fiddle: http://jsfiddle.net/mWe5Y/

Why is this happening, and how do I get rid of that extra "height"?

Upvotes: 20

Views: 9653

Answers (1)

clyfish
clyfish

Reputation: 10470

Because img is an inline element.

To get rid of that extra height:

.account-picture img {
    display: block;
}

Upvotes: 37

Related Questions