我使用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提琴

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

在这条线下面有空间是g、j、p和q等字母的降序。

您可以:

调整图像的垂直对齐，以将其定位在其他位置(例如中间)或 更改显示，使其不是内联的。

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>

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

快速修复:

要移除图像下方的间隙，您可以:

设置图像的垂直对齐属性为vertical-align: bottom;vertical-align:最高;或垂直对齐:中间; 设置图像的显示属性为display:block;

请看下面的演示代码:

#vAlign img { vertical-align:底部; ｝ #块img { 显示:块; ｝ Div{边框:1px实心红色;宽度:100px;} img{宽度:100 px;} < / p > < p >没有解决: < div > < img src = " http://i.imgur.com/RECDV24.jpg " / > < / div > < p > vertical-align:底部;形象:< / p > < div id = " vAlign " > < img src = " http://i.imgur.com/RECDV24.jpg " / > < / div > < p >显示:块;形象:< / p > < div id = "块" > < img src = " http://i.imgur.com/RECDV24.jpg " / > < / div >

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

The gap or extra space under the image isn't a bug or issue, it is the default behaviour. The root cause is that images are replaced elements (see MDN replaced elements). This allows them to "act like image" and have their own intrinsic dimensions, aspect ratio.... Browsers compute their display property to inline but they give them a special behaviour which makes them closer to inline-block elements (as you can vertical align them, give them a height, top/bottom margin and padding, transforms ...).

这也意味着:

<img>没有基线，所以当图像用于内联格式化时 上下文与垂直对齐:基线，图像的底部将是 放置在文本基线上。 (来源:MDN，强调我)

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

(图片来源)

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

Div{边框:1px纯红色; img{宽度:100 px;高度:汽车;} < div > <img src="http://i.imgur.com/RECDV24.jpg" />jpq是带降序的字母 < / div >

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

Div{宽度:100px;边界:1px实心红色;} Img{宽度:100px;高度:auto;} .block img { 显示:块; ｝ .bottom img { vertical-align:底部; ｝ < / p > < p >默认值: < div > <img src="http://i.imgur.com/RECDV24.jpg" /> < / div > < p >显示:块;< / p > < div class = "块" > <img src="http://i.imgur.com/RECDV24.jpg" /> < / div > < p > vertical-align:底部;< / p > < div class = "底" > <img src="http://i.imgur.com/RECDV24.jpg" /> < / div >

你也可以设置overflow: hidden;对于容器，将图像的高度增加到> 100%。高度:100%;

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

使用行高 #包装{line-height: 0px;｝ 使用显示:flex #包装{显示:flex;｝ #包装器{显示:inline-flex;｝ 使用显示:块，表，伸缩和继承 #包装img{显示:块;｝ #包装img{显示:表;｝ #包装img{显示:flex;｝ #包装img{显示:继承;｝