爲什麼圖像不在黃色背景下？

<!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時，它會保持原位。你能告訴我什麼在繼續嗎？爲什麼圖像不在黃色背景下？

來源

2011-04-03 oneat

當然。您的圖像正在與div的基線對齊。 div的默認行高設置給出了基線與20px div頂部之間的距離，因此當圖像爲20px時，它將填充該空間。任何更大的值都會強制線條高度增加，但更小的值會在上面留下間隙。各種解決方案都是可能的，具體取決於你想要發生什麼，但將圖像設置爲{ vertical-align:top; }是一種方法，或者將div.strip的行高降低到圖像的高度是另一種方法。

來源

2011-04-03 20:49:09 Alohci

爲什麼圖像不在黃色背景下？

回答

相關問題