Home/ Questions/Q 4248656
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T04:17:19+00:00

<!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

  • 0
<!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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0