爲什麼在div上設置邊距不會影響子內容的位置？

我想更清楚地瞭解CSS邊緣如何與div和子內容一起工作。爲什麼在div上設置邊距不會影響子內容的位置？

如果我試試這個...

<div style="clear: both; margin-top: 2em;"> 
    <input type="submit" value="Save" /> 
</div>

...保存按鈕是正對着該用戶角色（保證金失敗）：

Margin Fail :(http://img697.imageshack.us/img697/8459/nomargin.jpg

如果我將其更改爲...

<div style="clear: both;"> 
    <input style="margin-top: 2em;" type="submit" value="Save" /> 
</div>

...有保存按鈕和用戶角色（保證金贏）之間的差距：

Margin Win :) http://img20.imageshack.us/img20/1973/yesmargin.jpg

問題：

有人能解釋我在觀察什麼？爲什麼不在div上設置保證金會導致input向下移動？爲什麼我必須把保證金放在input本身？必須有一些基本的CSS規則，我不能理解。

來源

2010-03-07 devuxer

這將是因爲div沒有「推開自己」的元素。看起來在div之前的select是浮動的。這會導致它從正常頁面流中取出，並且不再用作邊距計算的參考。 div正在清除浮點數，即它落在它的下面，然後測試是否有相同「流量」內的下一個元素的2em餘量。顯然有，所以它不會再向下移動。

另一方面，在submit上設置邊距是非常明確的，因爲它的參照系是母公司div。

來源

2010-03-07 23:54:23 deceze

非常明確的解釋，謝謝，欺騙，+1。 – devuxer 2010-03-07 23:57:15

對元素設置邊距只會影響元素的邊距。你期待它被繼承嗎？事實並非如此。也許你在想padding？嘗試：

<div style="clear: both; padding-top: 2em;"> 
    <input type="submit" value="Save" /> 
</div>

見Box Model：

CSS box model

另一件事需要注意的利潤是它們合併。所以：

<div>one</div> 
<div>two</div>

有：

div { margin: 1em; }

只會造成他們之間沒有一個2em的差距1EM。見8.3.1 Collapsing Margins：

垂直邊距可以某些框之間崩潰：中block箱

兩個或兩個以上相鄰的垂直邊距在 normal flow崩潰。產生的邊距寬度是相鄰邊距寬度的最大值。在負邊界的情況下，相鄰邊界的絕對值的最大值爲從正值相鄰的邊界的最大值中扣除。如果沒有正數頁邊距，則可以從零開始扣除的負相鄰頁邊距的絕對最大值。 注意。鄰接框可能由與兄弟或祖先無關的元素生成。

因此，對於你看到的是你的DIV已經之前的元素有一個保證金（在底部），這就是爲什麼它沒有被按下藉由將邊緣到您的div一個可能的解釋。

基本上放在邊界周圍的東西，你應該看看發生了什麼。

來源

2010-03-07 23:51:06 cletus

我不期待它被繼承（我明白爲什麼這是沒有意義的）。我期望的是，如果一個孩子被包含在一個div內，它將位於div所在的位置。如果div向下移動2em，div內的東西應該向下移動2em。不應該嗎？ – devuxer 2010-03-07 23:53:46

+1表示邊距合併的概念。這似乎與欺騙的答案一致。如果您設定保證金，並不能保證您有這個保證金，它可以保證*至少*有這個保證金。 – devuxer 2010-03-07 23:59:26

@DanM如果沒有能夠查看頁面中的其他元素，很難說出發生了什麼，但看起來有*無*餘量，而不是*最小*餘量。與「清楚：兩者」一起提出了一個浮動元素，它完全「吞噬」了邊際，而不是邊際合併。您應該可以使用Firebug或Webkit Web Inspector等工具直觀地進行確認。 – deceze 2010-03-08 00:02:54

第一個示例中發生的情況是，按鈕上方的浮動元素在其父元素之外浮動。

邊距工作得很好，但它不在浮動元素和按鈕之間，它在浮動元素的父元素和按鈕之間。父元素沒有任何非浮動元素，所以它的高度爲零，並且浮動元素與邊距重疊。

來源

2010-03-07 23:56:54 Guffa

在第一個示例中，您在DIV本身上設置了一個邊距。把DIV想象成一個包含嵌套元素的塊。在這種情況下，嵌套元素將是按鈕。如果按照以下方法執行以下操作：

<div style="clear: both; margin-top: 2em;"> 
    <input type="submit" value="Save" /> 
</div>

您不會影響子元素樣式。雖然你的按鈕的相對位置可能會改變，但你的而不是實際上改變了子元素的樣式。現在通過這樣做：

<div style="clear: both; margin-top: 2em;"> 
    <input type="submit" value="Save" /> 
</div>

您現在正在設置子元素邊距。這將有不同的結果。設置此子元素邊距不會對父元素（DIV）產生影響。

來源

2010-03-08 06:01:41 contactmatt

都不是兩個例子是一樣的嗎？ – Borbea 2016-01-18 22:28:05

爲什麼在div上設置邊距不會影響子內容的位置？

回答

相關問題