Question

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）。

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

Answer 1

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

vertical-align: top;

Answer 2

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

display: block;

图像不会填充div

2 个答案: