HTML/CSS刺激性的默認行爲

這裏的問題：HTML/CSS刺激性的默認行爲

我有2個DIV - 第一個具有浮動：左 - 第二個有邊距現在

爲什麼，爲什麼那邊緣頂部也適用於第一個div？

這裏的背景顏色的演示，得到的想法：

http://dl.dropbox.com/u/4225936/whyyyyy.htm

- 編輯：我不是在尋找一個解決方案，但對這種行爲的解釋。謝謝大家:)

來源

2010-08-20 Daniel

您正在運行到一種叫margin-collapse。

如果兩個邊距相鄰，則較大者優先。由於您的第二個div的邊距與您的 div上的邊距相鄰，因此這些邊距會摺疊，而較大的一個（50px）優先，並影響它們兩者。

如果您向容器添加頂部填充，則效果將被刪除，因爲邊距不再相鄰。

編輯：請注意，「較大」有時不完全正確。例如，負邊距優先於零邊距。我還沒有測試過究竟是什麼計算，所以採取一粒鹽「更大」。

來源

2010-08-20 14:34:26

非常感謝瑞恩，你只是給了我我的理智回來:-) – Daniel 2010-08-22 07:14:31

總是樂於幫助！ – 2010-08-23 17:40:07

給float:left;的第二個div也

<div style="background: none repeat scroll 0% 0% red; margin: 0pt;"> 
<div style="background: none repeat scroll 0% 0% green; float: left;">hello</div> 
<div style="background: none repeat scroll 0% 0% gold; margin-top: 50px; float: left;">hello</div>

here結果。

來源

2010-08-20 14:10:28 Sotiris

嗨，感謝您給出一個解決方案，並花時間來創建一個演示，但正如我對Webarto說的，我不是在尋找解決方案，而是爲了解釋這種行爲。我應該從一開始就對此表示歉意。仍然+1演示:) – Daniel 2010-08-20 14:25:10

可能發生這種情況是因爲容器div（紅色）沒有任何高度，填充或邊距。所以沒有固定的位置開始。如果你在紅色div上設置了上述任何一個，第二個div將從它的頂部開始，而不是body（如現在這樣） – Sotiris 2010-08-20 14:38:27

您可以使用填充頂，而不是邊距

來源

2010-08-20 14:12:26

我已經找到了不同的方法來解決這個問題，但是我想知道這是爲什麼發生... 但仍然，謝謝。 – Daniel 2010-08-20 14:18:14

我想他是想移動div而不是內容。如果他使用背景（如他的例子），那麼顏色將填充和填充區域。 – Sotiris 2010-08-20 14:19:35

HTML/CSS刺激性的默認行爲

回答

相關問題