DIV 中图像的填充/边距

Question

好的。我最近对这个网站做了一些更新。

http://annberingerart.com/index.php

在进行了一些小改动后，索引页上图像的边距和内边距似乎发生了变化。我希望在所有图像之间有相同的垂直和水平填充以及一致的边距。

此外，我在安装了 Safari 5 的朋友的 MAC 上查看该网站时，整个包装器的大小似乎缩小了，因为它无法像我进行更改之前那样包含它的子级。

您可以查看 firebug 中的 CSS，因为在此处发布 400 多行 CSS 会冗长且过多。

欢迎提出任何批评意见，但我主要希望得到有关如何解决此问题的建议。

Answer 1

您的水平边距是由空格/换行符引起的，因为图像是内联元素（实际上是一种内联块......）。

如果您浮动图像，您将可以更好地控制确切的边距，而不是依赖于空格/换行符的宽度。

要解决您的问题，您可以：

• 向左浮动图像；
• 给包装器一个左填充，没有右填充和一个overflow:hidden；
• 为所有图像添加右填充（与包装器的左填充相同）。