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)
这是结果:
如您所见,(愚蠢的)蓝色和红色图像不会填充橙色div.图像下方有一致的5px橙色.这不受div或图像的%宽度更改或通过调整窗口大小的影响.
我可以用"margin:-5px;"解决这个问题,但我想知道它为什么会发生(特别是在不同的情况下,数量大于或小于5px).
感谢您的帮助(如果这是我的一个荒谬的错误,再次抱歉).
Rok*_*jan 20
为图像添加垂直对齐值(默认值baseline除外),如:top,middle...
vertical-align: top;
Run Code Online (Sandbox Code Playgroud)