CODEWITHSUNDEEP
cssimageheight
Dan Stern
Dan Stern

Reputation: 2167

div height overstretching when image is appended

I'm having a problem with nested divs and their height.

What i want to accomplish is that the an image's parent's height stretch to fit the image. What is happening is that the parent is overstretching and the height is bigger than the image.

you can check the code working here: http://jsfiddle.net/83Ke6/

HTML

<div class="select_box">
    <div class="selected">
        <img src="http://awardwallet.com/images/fbSmallLogo.png" />
    </div>
</div>

CSS

.select_box {
    display:inline-block;
    height:50px;
    border:1px solid blue;
}
.selected {
    border:1px solid gray;
}
img {
    border:1px solid red;
}

So on this case, .selected should equal img height, however it is 5px heigher; Thanks for the help

Upvotes: 1

Views: 84

Answers (2)

R Lacorne
R Lacorne

Reputation: 604

.select_box {
    display:inline-block;
    height:auto;
    border:1px solid blue;
    line-height:0px;
}
.selected {
    border:1px solid gray;
    height:auto;
}
img {
    border:1px solid red;
}

By setting an auto; height and an line-height of 0px;, your div will adjust to it's inner content. Resulting like this: http://jsfiddle.net/wz45k/

Upvotes: 1

monokh
monokh

Reputation: 1990

By default img is a inline element and therefore reserves a space under just like lines in a paragraph. Add display: block; to the image to remove the spacing.

Fiddle: http://jsfiddle.net/83Ke6/3/

Upvotes: 3

Related Questions