身體是內部div的父標籤嗎？

我已經開始學習HTML和CSS，並遇到了一些誤會...... 下面是一些代碼：身體是內部div的父標籤嗎？

body { 
 
    margin: 0px; 
 
} 
 

 
#red { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-top: 55px; 
 
    margin-left: 30px; 
 
} 
 

 
#green { 
 
    background: green; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin-left: 15px; 
 
    margin-top: 55px; 
 
}

<div id="red"></div> 
 
<div id="green"></div>

這裏是紅色和綠色塊。紅色的邊緣是55px。它是從屏幕頂部算起的（我認爲這裏的父母是<html>）。但紅塊的父母顯然是<body>。所以問題是，爲什麼會發生？爲什麼保證金不是從身體計算的？

來源

2017-02-21 Leonid

變化的位置是：絕對的;或位置：固定;或位置：相對;然後觀察更改 –

您使用的是哪種瀏覽器？ – MKAD

firefox，chrome – Leonid

這就是所謂的保證金崩潰。

當具有空白的元素位於沒有填充或邊框的元素內時，空白將應用於父元素之外而不是子元素和父邊之間。

此行爲的基本原因是，margin指定元素之間的最小區別，而不是像元素周圍的距離，指定元素內容周圍的距離。

https://www.sitepoint.com/web-foundations/collapsing-margins/

您可以刪除保證金倒塌通過以下幾種方式：

浮動元素
絕對定位的元素
inline-block的元素
元素具有溢出設置爲其他任何（他們做的與他們的孩子沒有崩潰的利潤。）
清除元件（它們不與它們母塊的底部邊緣坍塌它們的頂部邊緣。）
根元素

來源

2017-02-21 09:14:47 Piyali

這是「緣塌陷」在CSS

https://css-tricks.com/what-you-should-know-about-collapsing-margins/ ..

，你會發現它的各種物品..

只是試圖讓你的身體邊框則經典案例你會看到它不發生..

閱讀其他方式來避免這種

How to disable margin-collapsing?

<!DOCTYPE> 
 
<html> 
 
<head> 
 
<title>Why, mr. Anderson?</title> 
 
\t <style type="text/css"> 
 
\t 
 
\t \t body { \t \t 
 
\t \t \t margin: 0px; 
 
     border: 1px solid red; 
 
\t \t } 
 
\t \t \t 
 
\t \t #red { 
 
\t \t \t background:red; 
 
\t \t \t width: 100px; 
 
\t \t \t height: 100px; 
 
\t \t \t margin-top: 55px; 
 
\t \t \t margin-left: 30px; 
 
\t \t } 
 
\t \t \t 
 
\t \t #green { 
 
\t \t \t background:green; 
 
\t \t \t width: 200px; 
 
\t \t \t height: 200px; 
 
\t \t \t margin-left: 15px; 
 
\t \t \t margin-top: 55px; 
 
\t \t } \t \t 
 
\t </style> 
 
</head> 
 
<body> 
 

 
\t <div id="red"></div> 
 
\t <div id="green"></div> 
 
\t 
 

 
</body> 
 
</html>

來源

2017-02-21 08:07:13

身體是內部div的父標籤嗎？

回答

相關問題