当我在图像周围放置一个 div 时，为啥底部有间距？ [复制]

Posted 2023-03-06

【中文标题】当我在图像周围放置一个 div 时，为啥底部有间距？ [复制]

【英文标题】：When I put a div around an image, why is there spacing at the bottom? [duplicate]当我在图像周围放置一个 div 时，为什么底部有间距？ [复制]

【发布时间】：2017-08-02 05:00:41

【问题描述】：

以这个小提琴为例：https://jsfiddle.net/ou33muc2/

<div class = "overallDiv">
<div id="example"><img src = "http://writingexercises.co.uk/images2/randomimage/slimy.jpg" style="width:100vw; opacity: 0.5;"/></div></div>

我不明白为什么图片周围的div和上、左、右的图片之间没有空隙，但是底部有空隙，如红色边框所示。

此外，我怎样才能删除它，以便 div 紧贴整个图像？

编辑：我知道在图像周围有一个 div 周围有一个 div 似乎有点毫无意义，但这是一个按比例缩小的问题，问题仍然适用，所以请忽略它的实用性。

【问题讨论】：

我大胆猜测这是由于浏览器实现的默认样式。也许尝试使用 CSS reset 运行？

您能否提供有关如何执行此操作的见解？

这里已经回答了很多次了，简单的谷歌搜索div gap img会给你很多结果，你应该研究而不是问完之后再问

【参考方案1】：

因为图像在基线处垂直对齐 - 通常放置文本的位置。并且在基线下方有空间，用于带有“下降”的字母，如 j、g、p 等。

为避免这种情况，只需将line-height: 0; 添加到容器中：

https://jsfiddle.net/5czathrh/1/（编辑：更新）

【讨论】：

效果很好，解释很好。

【参考方案2】：

这是文本下降空间（“基线”下方的区域）。如果您在图像上设置display: block，您可以使用更传统的边距/等值对其进行布局。