图像不会填充 div答案

【问题标题】：Image will not fill div图像不会填充 div
【发布时间】：2019-04-09 16:16:17
【问题描述】：

CSS/HTML 问题。

这太疯狂了——我只能假设我是个白痴。我无法让我的图像填充它所在的 div。图像下方始终有 5px 的“填充”。

这里是html：

<!doctype html>

<head><link rel="stylesheet" href="style.css" type="text/css" /></head>

<body>
<div class="row">
<img src="pic2.jpg" />
</div>
</body>

这是 CSS：

body, .row, img {
padding: 0;
margin: 0;
border: none;
}

.row {
width: 80%;
background-color: orange;
}

img{
width: 50%;
}

这是结果：

http://imgur.com/yELMe

如您所见，（愚蠢的）蓝色和红色图像没有填充橙色 div。图像下方显示一致的 5px 橙色。这不受 div 或图像的 % 宽度更改或调整窗口大小的影响。

我可以用“margin: -5px;”来解决这个问题，但我想知道为什么会这样（尤其是在不同情况下，数量大于或小于 5px）。

感谢您的帮助（如果这是我的荒谬错误，再次抱歉）。

【问题讨论】：

这是一个活生生的例子jsfiddle.net/aDtUm

标签： html css image

【解决方案1】：

为您的图像添加一个vertical-align 值（默认baseline 除外），例如：top、middle...

vertical-align: top;

【讨论】：

对于内联图像（非浮动），页面的自然浮动存在“漏洞”，它们开始尊重为排版提供的元素空间，如字体大小、行高等。您可以轻松地测试它（在非工作演示中）：只需添加 body{font-size:50px;} ，您就会看到边距空间将如何增加。通过设置图像的垂直对齐方式，我们确保提供与浏览器默认设置不同的位置。
好吧，我明白了。我永远不会解决这个问题。再次感谢您的帮助！
@jkdume 谢谢你！ Here 是一篇有趣的文章

【解决方案2】：

我通过将img 的display 设置为block 来解决此问题：

display: block;

【讨论】：