<!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>
There seems to be a slight issue where the image within the "box" is shifted downwards. Strangely, when the height is more than 20px, it remains in its correct position. Can anyone shed some light on what might be causing this?