2010-11-30 196 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