CSS：父母沒有邊框時的邊際保留

正如您在this picture中看到的，我在橙色div內部看到一個綠色的div，沒有上邊框。橙色div有一個30px頂部邊距，但它也推動了綠色div下降。當然，添加頂部邊框可以解決這個問題，但我需要綠色div頂部無邊框。我能做什麼？CSS：父母沒有邊框時的邊際保留

.body { 
 
\t border: 1px solid black; 
 
\t border-top: none; 
 
\t border-bottom: none; 
 
\t width: 120px; 
 
\t height: 112px; 
 
\t background-color: lightgreen; 
 
} 
 

 
.body .container { 
 
\t background-color: orange; 
 
\t height: 50px; 
 
\t width: 50%; 
 
\t margin-top: 30px; 
 
}

<div class="header">Top</div> 
 
<div class="body"> 
 
\t <div class="container">Box</div> 
 
</div> 
 
<div class="foot">Bottom</div>

感謝

來源

2009-09-08 Manny

你能詳細說明所需的效果嗎？您是否希望橙色容器中的文本顯示爲距頂部30像素，還是希望橙色容器的頂部顯示爲綠色容器頂部下方30像素？ – Mayo 2009-09-08 15:45:36

相關問題：http://stackoverflow.com/questions/315738/unexpected-margin-with-very-simple-html – mercator 2009-09-08 15:59:56

可能更適合http://doctype.com/ – Nobody 2010-08-03 10:40:18

您可以將overflow:auto添加到.body以防止邊緣塌陷。看到http://www.w3.org/TR/CSS2/box.html#collapsing-margins

來源

2009-09-08 15:57:11 Fabian

woot，剛剛救了我，因爲我的消失邊緣而生氣！ – 2009-10-27 17:43:13

我有同樣的問題，因爲我不希望有邊界而讓我瘋狂，這解決了我的問題，感謝信息，鏈接幫助解釋了爲什麼發生這種情況。 – jimplode 2011-10-28 14:45:21

邊緣崩潰似乎是一個奇怪的事情，作爲一個默認設置，任何人都有一個很好的例子，當你想使用它？ – opsb 2013-01-25 17:53:20

使用padding，而不是margin：

.body .container { 
    ... 
    padding-top: 30px; 
}

來源

2009-09-08 15:45:55

您可以在綠色框中添加padding-top: 30，與top: 30px橙色盒子使用相對定位，或漂浮橙色框並使用相同的margin-top: 30px。

來源

2009-09-08 15:50:03

您閱讀本文件： Box model - Margin collapsing

CSS

.body { 
    border: 1px solid black; 
    border-bottom: none; 
    border-top: none; 
    width: 120px; 
    height: 112px; 
    background-color: lightgreen; 
    padding-top: 30px; 
} 

.body .container { 
    background-color: orange; 
    height: 50px; 
    width: 50%; 
}

來源

2009-09-08 15:52:18 ranonE

你體驗什麼是外匯保證金崩潰。邊距不指定元素周圍的區域，而是元素之間的最小距離。

由於綠色容器沒有任何邊框或填充，因此沒有任何內容可以包含橙色元素的邊距。頂部元素和橙色元素之間使用邊距，就好像綠色容器具有邊距一樣。

在綠色容器中使用填充而不是橙色元素上的邊距。

來源

2009-09-08 15:56:53 Guffa

不知道這聽起來多麼討厭，但如何添加透明邊框？

來源

2010-02-20 01:07:53 finferflu

不知道這是否會在你的情況下工作，但我只是解決了這個具有以下CSS屬性

#element { 
    padding-top: 1px; 
    margin-top: -1px; 
}

#element正在下推，因爲它是第一個子元素有一個margin-top: 30px。有了這個CSS，它現在可以按預期工作:)不知道它是否適用於每種情況，YMMV。

來源

2010-05-10 01:06:26 alex

CSS：父母沒有邊框時的邊際保留

回答

相關問題