我很沮喪，試圖解決這個問題，但無法解決它。css不需要的邊緣在父div

我有一個簡單的HTML頁面結構：

頭格，身體DIV和頁腳股利。

的問題是，所述主體div（.form-container）的含量會影響身體div本身（.body-container）的margin。

例子：

body { 
 
    margin: 0px; 
 
} 
 
.header-container { 
 
    height: 250px; 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 
.body-container { 
 
    height: 500px; 
 
    width: 100%; 
 
    background-color: green; 
 
    background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top; 
 
} 
 
.footer-container { 
 
    height: 150px; 
 
    width: 100%; 
 
    background-color: blue; 
 
} 
 
.form-container { 
 
    margin-bottom: 30px; 
 
    margin-top: 30px; 
 
}

<div class="header-container"></div> 
 
<div class="body-container"> 
 
    <div class="form-container"></div> 
 
</div> 
 
<div class="footer-container"></div>

如何擺脫這種margin體內div的？

來源

2016-04-06 simsim

這是由於利潤率倒塌

這是正常現象，Mozilla開發者網絡狀態：

如果沒有邊框，內邊距，內嵌內容或間距以將塊的邊緣頂部與其第一個子塊的邊緣頂部分開，或者沒有邊框，填充，內嵌內容，高度，最小高度或最大高度將塊的邊緣底部與其最後一個孩子的邊緣底部分開，然後這些邊距將摺疊。摺疊後的保證金最終在家長之外。

Mastering margin collapsing

在這種情況下的條件是通過.body-container和.form-container滿足這樣的.form-container的margin外結束.body-container。

你能做什麼？

有許多的方法可以制止這種行爲，但最簡單的是就.form-container爲padding不垮使用padding，而不是margin。

body { 
 
    margin: 0px; 
 
} 
 
.header-container { 
 
    height: 250px; 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 
.body-container { 
 
    height: 500px; 
 
    width: 100%; 
 
    background-color: green; 
 
    background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top; 
 
} 
 
.footer-container { 
 
    height: 150px; 
 
    width: 100%; 
 
    background-color: blue; 
 
} 
 
.form-container { 
 
    padding: 30px 0; 
 
}

<div class="header-container"></div> 
 
<div class="body-container"> 
 
    <div class="form-container"></div> 
 
</div> 
 
<div class="footer-container"></div>

來源

2016-04-06 07:52:24

刪除此部分刪除不需要保證金：

 .form-container{ 
      margin-bottom:30px; 
      margin-top:30px; 
     }

See this fiddle

編輯

如果你想保留的空間，你可以使用一個padding-top代替。

See it here

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

注意

此屬性的.body-containerbackground-color: green;不適用，因爲background財產低於該有一個白色的background-color屬性在這裏設置的：background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top;

來源

2016-04-06 07:44:11

對不起，我不明白，我想要的利潤，我想身體DIV中的DIV有從它的父格「人體格」的空間，但問題是，這個邊緣也影響父div背景圖像，它充當身體div的填充，爲什麼！ – simsim

有是一個div .form-container在應用follwing css的body div

.form-container{ 
     margin-bottom:30px; 
     margin-top:30px; 
    }

因爲在這個沒有內容DIV其顯示的頂部和底部邊緣，這樣你們可以用你們float:left或dislay:inline財產不能刪除CSS或者如果可以則簡單地刪除這個CSS。

<html> 
 
\t <head> 
 
\t \t <style> 
 
\t \t \t 
 
\t \t \t body{ 
 
\t \t \t \t margin:0px; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .header-container{ 
 
\t \t \t \t height:250px; 
 
\t \t \t \t width:100%; 
 
\t \t \t \t background-color: red; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .body-container{ 
 
\t \t \t \t height:500px; 
 
\t \t \t \t width:100%; 
 
\t \t \t \t background-color: green; 
 
\t \t \t \t background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .footer-container{ 
 
\t \t \t \t height:150px; 
 
\t \t \t \t width:100%; 
 
\t \t \t \t background-color: blue; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .form-container{ 
 
\t \t \t \t margin-bottom:30px; 
 
\t \t \t \t margin-top:30px; 
 
\t \t \t \t float:left; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="header-container"></div> 
 
\t \t <div class="body-container"> 
 
\t \t 
 
\t \t \t <div class="form-container"> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t <div class="footer-container"></div> 
 
\t </body> 
 
</html>

來源

2016-04-06 07:46:22

Add "margin-top:-30px" to the .body-container part

<html> 
 
\t <head> 
 
\t \t <style> 
 
\t \t \t 
 
\t \t \t body{ 
 
\t \t \t \t margin:0px; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .header-container{ 
 
\t \t \t \t height:250px; 
 
\t \t \t \t width:100%; 
 
\t \t \t \t background-color: red; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .body-container{ 
 
       margin-top:-30px; 
 
\t \t \t \t height:500px; 
 
\t \t \t \t width:100%; 
 
\t \t \t \t background-color: green; 
 
\t \t \t \t background: #fff url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left top; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .footer-container{ 
 
\t \t \t \t height:150px; 
 
\t \t \t \t width:100%; 
 
\t \t \t \t background-color: blue; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .form-container{ 
 
\t \t \t \t margin-bottom:30px; 
 
\t \t \t \t margin-top:30px; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="header-container"></div> 
 
\t \t <div class="body-container"> 
 
\t \t 
 
\t \t \t <div class="form-container"> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t <div class="footer-container"></div> 
 
\t </body> 
 
</html> 
 
► Run code snippetCopy snippet to answer

來源

2016-04-06 07:49:21

如果您的標題，正文和頁腳的div浮動，額外的空間消失。

浮動使他們嘗試粘在一起，但你的寬度：100％，以確保他們每個頁面寬。

我也編輯了一下你的代碼。

    <html> 
 
       <head> 
 
        <style> 
 

 
        body{ 
 
        margin:0px; 
 
       } 
 

 
       .header-container{ 
 
        height:250px; 
 
        width:100%; 
 
        background-color: red; 
 
        float: left; 
 
       } 
 

 
       .body-container{ 
 
        height:500px; 
 
        width:100%; 
 
        background: url('http://www.htmlcodetutorial.com/document/paper.gif') repeat scroll left; 
 
        float: left; 
 
       } 
 

 
       .footer-container{ 
 
        height:150px; 
 
        width:100%; 
 
        background-color: blue; 
 
        float: left; 
 
       } 
 

 
       .form-container{ 
 
        margin-bottom:30px; 
 
        margin-top:30px; 
 
       } 
 

 
       </style> 
 
      </head> 
 
      <body> 
 
       <div class="header-container"></div> 
 
       <div class="body-container"> 
 

 
       <div class="form-container"> 
 
       </div> 
 

 
      </div> 
 
      <div class="footer-container"></div> 
 
      </body> 
 
      </html>

來源

2016-04-06 07:53:38 Lxske

css不需要的邊緣在父div

回答

這是由於利潤率倒塌

你能做什麼？

相關問題