div中的图像在图像下面有额外的空间

为什么在代码中div的高度比img的高度大?图像下方有一个空白，但它似乎不是填充/边距。

图像下方的空隙或额外空间是什么?

#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}
<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>

下方有空白或空白的图像

214922 次浏览
小开
最佳答案

默认情况下，图像是内联呈现的，就像字母一样，因此它与a、b、c和d位于同一行。

在g、j、p和q等字母上的字体线下面有空格。

descent示范

您可以:

  • 调整图像的vertical-align以将其定位到其他位置(例如middle) 或
  • 更改display，使它不是内联的。

div {
border: solid black 1px;
margin-bottom: 10px;
}


#align-middle img {
vertical-align: middle;
}


#align-base img {
vertical-align: bottom;
}


#display img {
display: block;
}
<div id="default">
<h1>Default</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>


<div id="align-middle">
<h1>vertical-align: middle</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
  

<div id="align-base">
<h1>vertical-align: bottom</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>


<div id="display">
<h1>display: block</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

所包含的图片是公共领域的，采购来自维基共享资源

小开

在博客中建议的另一个选项是将图像的样式设置为style="display: block;"

小开

你也可以取消父行高:

#wrapper {
line-height: 0;
}

所有修复:http://jsfiddle.net/FaPFv/

小开

我只是添加了float:left到div，它工作了

小开

我使用line-height:0，它对我来说很好。

小开

我发现它使用display:block很棒;在图像上并垂直对齐:top;在文本上。

. 
.imagebox {
width:200px;
float:left;
height:88px;
position:relative;
background-color: #999;
}
.container {
width:600px;
height:176px;
background-color: #666;
position:relative;
overflow:hidden;
}
.text {
color: #000;
font-size: 11px;
font-family: robotomeduim, sans-serif;
vertical-align:top;
    

}


.imagebox img{ display:block;}
<div class="container">
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
</div>

或者你可以编辑代码JS小提琴

小开

快速修复:

到移除图像下方的间隙，你可以:

  • 设置图像的vertical-align属性为vertical-align: bottom; vertical-align: top;或vertical-align: middle;
  • 将图像的显示属性设置为display:block;

请看下面的演示代码:

#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}


div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>


<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>


<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

说明:为什么图像下面有一个间隙?

图像下方的间隙或额外空间不是bug或问题，这是默认行为。根本原因是图像替换了元素(参见MDN替换的元素)。这让他们“像图像一样行动”，并有自己的内在维度，长宽比....
浏览器计算他们的显示属性为inline，但他们给他们一个特殊的行为，使他们更接近inline-block元素(因为你可以垂直对齐他们，给他们一个高度，上下边距和填充，转换…)

这也意味着:

<img>没有基线，所以当图像用于内联格式化时 上下文用vertical-align: baseline， 图像底部将为 置于文本基线上。
(# EYZ0) < / p >

当浏览器默认计算垂直对齐属性为基线时，这是默认行为。下图显示了基线在文本上的位置:

文本上基线的位置 (# EYZ0) < / em >

基线对齐的元素需要为延伸到基线以下的字体(如j, p, g ...)保留空间，如上图所示。在这个配置中，图像的底部与基线对齐，正如你在这个例子中看到的:

div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

这就是为什么<img>标签的默认行为会在它的容器底部创建一个间隙，以及为什么改变垂直对齐属性或显示属性会删除它，如下面的演示:

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}


.block img{
display:block;
}
.bottom img{
vertical-align:bottom;
}
<p>Default:</p>
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>

小开

你所要做的就是分配这个属性:

img {
display: block;
}

图片默认有这个属性:

img {
display: inline;
}
小开

你可以使用几种方法来解决这个问题

  1. 使用# EYZ0 < p >

    #wrapper {  line-height: 0px;  }

  2. Using display: flex

    #wrapper {  display: flex;         }
#wrapper {  display: inline-flex;  }

  3. Using display: block, table, flex and inherit

    #wrapper img {  display: block;    }
#wrapper img {  display: table;    }
#wrapper img {  display: flex;     }
#wrapper img {  display: inherit;  }
小开

您还可以为容器设置overflow: hidden;，并将图像的高度增加到>100%。# EYZ1


提交答案