当img不是块元素时，包装器上的额外高度？ [英] Extra height on wrapper when img is not a block element?

问题描述

我以为我明白了内联和块元素如何工作，但是这引发了我。我找到了问题的解决方案，但我不知道为什么它工作。

由于某种原因，如果你有一个 img 里面的 div ，div就像 3.5px 。但是，如果您将图片设置为块元素，则额外的高度会消失。

基本HTML：

 < div id =wrapper> 
< img src =http://www.basini.com/wp-content/uploads/2013/02/seeing-in-the-dark.jpgwidth =300height =230 /> 
< / div> 
  

和CSS：

  #wrapper {
 background：orange; 
} 
 #wrapper img {
 / * display：block;这将删除额外的高度* / 
} 
  

我已经设置了 jsfiddle来演示效果

为什么这发生，为什么使'img'块元素修复它？有没有其他解决方案？

解决方案

默认情况下， p>

它位于a，b，c和d所在的同一行上。

您可以调整图片的vertical-align以将其放置在其他位置。

I thought I understood how inline and block elements work, however this has thrown me. I have found a fix for the issue however I have no idea why it works.

For some reason if you have an img inside a div, the div is like 3.5px taller than the image. However if you set the image as a block element this extra height disappears.

Basic HTML:

<div id="wrapper">
        <img src="http://www.basini.com/wp-content/uploads/2013/02/seeing-in-the-dark.jpg" width="300" height="230"  />
</div>

And the CSS:

#wrapper {
    background: orange;
}
#wrapper img {
    /* display: block; this will remove the extra height */
}

I have set up a jsfiddle to demonstrate the effect

Why does this happen and why does making the 'img' a block element fix it? Are there any other solutions?

解决方案

By default, an image is rendered inline, like a letter.

It sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like j, p and q.

You can adjust the vertical-align of the image to position it elsewhere.

这篇关于当img不是块元素时，包装器上的额外高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！