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

【问题标题】：CSS: adjusting position of 4 images in a divCSS：调整 4 个图像在 div 中的位置
【发布时间】：2013-01-05 22:35:31
【问题描述】：

我有这个问题：我在 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

【问题讨论】：

你使用一些CSS reset 吗？

标签： css image html position

【解决方案1】：

你可以使用：

img { margin: 0; padding: 0; }

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

【讨论】：

【解决方案2】：

您是否尝试将内边距和边距设置为 0？

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

【讨论】：

是的，它没有用，我不得不说，我找到了答案。但是非常感谢。

【解决方案3】：

它是空格和行高（行内元素和行内块元素之间有空格）。有很多方法可以消除它，但这是我最喜欢的一种：

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

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

您可以像这样消除由 line-height 引起的间距：

line-height: 1;

【讨论】：