为什么图像落叶不是黄色背景?

时间:2011-04-03 19:10:17

标签: html css firefox

<!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时,它会保持原位。你能告诉我接下来会发生什么吗?

1 个答案:

答案 0 :(得分:1)

不确定。您的图像与div的基线对齐。 div的默认行高设置给出了基线和20px div的顶部之间的距离,因此当图像为20px时,它会填充该空间。任何更大的值都会强制线高度增加,但任何更小的值都会使线条高度增加。各种解决方案都是可能的,具体取决于您想要发生的事情,但将图像设置为{ vertical-align:top; }是一种方法,或者将div.strip的行高减小到图像的高度是另一种方法。