2010-11-30 151 views
0

好的。我最近对这个网站做了一些更新。DIV内图像的填充/边距

http://annberingerart.com/index.php

在制做似乎对索引页上的图像margin和padding已经改变了一些细微的变化。我希望所有图像之间在垂直和水平方向上都具有相同的填充以及一致的边距。

此外,我在安装Safari 5的朋友的MAC上查看网站,整个包装看起来缩小了,因为它没有包含它的子项,因为它在我进行更改之前就已经包含了。

你可以看看萤火虫中的CSS,因为在这里发布超过400行的CSS会很冗长和过分。

任何和所有的批评是受欢迎的,但我主要是想如何解决这个问题的建议。

回答

5

您的水平边距是由空格/换行引起的,因为图像是内嵌元素(排序内嵌块真的......)。

如果您浮动图像,您将有更多的控制精确的边距,而不是取决于空间/换行符的宽度。

解决你的问题,你可以:

  • 浮动图像离开;
  • 给包装一个左填充,没有右填充和overflow:hidden;
  • 给所有图像一个正确的填充(与包装的左填充相同)。
+0

+1对于浮动,但只是确保图像都是相同的高度和/或每行有`clear:left`或浮动将下降。 – Ross 2010-11-30 22:14:09