图像不会填充div

jkd*_*une 7 html css image

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>
Run Code Online (Sandbox Code Playgroud)

这是CSS:

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

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

img{
width: 50%;
}
Run Code Online (Sandbox Code Playgroud)

这是结果:

http://imgur.com/yELMe

如您所见,(愚蠢的)蓝色和红色图像不会填充橙色div.图像下方有一致的5px橙色.这不受div或图像的%宽度更改或通过调整窗口大小的影响.

我可以用"margin:-5px;"解决这个问题,但我想知道它为什么会发生(特别是在不同的情况下,数量大于或小于5px).

感谢您的帮助(如果这是我的一个荒谬的错误,再次抱歉).

Rok*_*jan 20

为图像添加垂直对齐值(默认值baseline除外),如:top,middle...

vertical-align: top;
Run Code Online (Sandbox Code Playgroud)


Sky*_*Sky 5

我通过设置 to 解决了display这个img问题block

display: block;
Run Code Online (Sandbox Code Playgroud)