CSS：在div中調整4個圖像的位置

Question

我有這個問題：我在Photoshop中剪切了4個圓圈，我想在HTML頁面中將它們用作4個鏈接。所以我創造了這樣一個DIV：

<div id="box"> 

    <a href="www.abc.com"><img src="G.png" /></a> 
    <a href="www.efg.net"><img src="UW.png" /></a> 

    <a href="www.yahoo.com"><img src="DW.png" /></a> 
    <a href="www.google.com"><img src="R.png" /></a> 
</div> 

和這樣的CSS文件：

#box { 
    width:185px; 
} 

，但結果不是我想要的。正如你在圖片中看到的那樣，這4張圖片之間有一個空格。我該如何解決這個問題？謝謝。 http://www.img4up.com/up2/96145115384598309149.png

Answer 1

您可以使用：

img { margin: 0; padding: 0; } 

a { float: left; margin: 0; padding: 0; } 

Answer 2

您是否嘗試設置填充和利潤爲0？

#box a, #box img{margin:0px; padding:0px;}

Answer 3

它是空白和行高度（空格被內聯和內聯塊元件之間兌現）。有相當多的方法來消除它，但是這是我的最愛：

<img /><!-- 
--><img /> 

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

可以消除由行高這樣的間距：

line-height: 1;