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;

CSS：调整div中4个图像的位置

3 个答案: