Why the image larrow isn't in yellow background?
<!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>
I've got problem because my image placed in a "box" is moved a little down. But when the height is bigger than 20px around it stays in place. Could you tell me What Is Going On ?
Sure. Your image is being aligned to the baseline of the div. The default line-height setting of your div gives a distance between the baseline and the top of the div of 20px, so when the image is 20px it fills that space. Any greater value forces the line height to increase but any smaller value leaves a gap above. Various solutions are possible, depending on precisely what you want to happen, but setting the image to { vertical-align:top; } is one approach, or reducing the line-height of div.strip to the height of the image is another.
加载中,请稍侯......
精彩评论