문제 설명
이미지가 추가될 때 div 높이가 과도하게 늘어남 (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
참조 솔루션
방법 1:
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/
방법 2:
.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/
(by Dan Stern、monokh、R Lacorne)