<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<style type="text/css">
*{padding:0px;margin:0px;}
.strip {width:1000px;border:1px solid red;clear:none;height:10px;}
.box{display:inline-block;width:17px;height:inherit;}
img{width:inherit;height:inherit;}
</style>
<body>
<div class="strip" style="background-color:green;">
<div class="box" style="background-color:yellow;">
<img src="larrow.gif">
</div>
</div>
</body>
</html>
我遇到了问题，因为我放置在“盒子”中的图像向下移动了一点。但是当周围的高度大于 20px 时，它会留在原地。你能告诉我发生了什么事吗？
最佳答案
当然。您的图像与 div 的基线对齐。 div 的默认行高设置给出了基线和 20px 的 div 顶部之间的距离，因此当图像为 20px 时，它会填充该空间。任何较大的值都会强制行高增加，但任何较小的值都会在上方留下间隙。有多种解决方案，具体取决于您想要发生什么，但将图像设置为 { vertical-align:top; 是一种方法，或者将 div.strip 的行高降低到图像的高度是另一种方法。
关于html - 为什么图像 larrow 不是黄色背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5531799/