HTML CSS樣式保證金不包裝

我有一些關於下面的CSS的問題。HTML CSS樣式保證金不包裝

.mainform{ 
 
    margin:50px 20px; 
 
    background-color:#444; 
 
    width:100%; 
 
    height:80px; 
 
} 
 

 
.scontainer{ 
 
    background-color:#999; 
 
}

<div class="scontainer"> 
 
    <div class="mainform"> 
 
    TST 
 

 
    </div> 
 
</div>

我已經得到了以下結果。儘管「scontainer」div包裝了「mainform」div，但margin的部分沒有背景顏色。
爲什麼mainform的邊緣部分沒有背景色，儘管父層有背景色？
請幫幫我。
謝謝。

來源

2017-02-04 Andrew Li

http://stackoverflow.com/questions/42022848/why-does-margin-top-not-work-to-get-the-yellow -box-down/42022994＃42022994 – linktoahref

添加邊框會對元素

scontainer有背景的清晰度：灰色的，它有一個MainForm的孩子寬度100％和高度80px。 mainform在scontainer中使用邊距，如果沒有提到邊框，scontainer只是具有背景色，所以只顯示mainform的樣式，要使邊緣區域上的顏色嘗試添加邊框，如片段中所述或指定高度和寬度上scontainer

.mainform{ 
 
    margin:50px 20px; 
 
    background-color:#444; 
 
    width:100%; 
 
    height:80px; 
 
    border:1px dashed green; 
 
    } 
 

 
    .scontainer{ 
 
    background-color:gray; 
 
    border:1px solid yellow; 
 
    }

<style> 
 
    
 
</style> 
 
<div class="scontainer"> 
 
    <div class="mainform"> 
 
    TST 
 

 
    </div> 
 
</div>

希望它可以幫助

來源

2017-02-04 06:43:54 Geeky

使用填充父，而不是對孩子保證金。

看看這個片斷：

.mainform{ 
 
    background-color:#444; 
 
    width:100%; 
 
    height:80px; 
 
} 
 

 
.scontainer{ 
 
    background-color:#999; 
 
    padding:50px 20px; 
 
}

<div class="scontainer"> 
 
    <div class="mainform"> 
 
    TST 
 

 
    </div> 
 
</div>

來源

2017-02-04 06:38:19

使用「邊距」時，爲什麼父母沒有背景顏色作爲孩子的邊緣部分？ –

這就是所謂的「邊緣摺疊」，你可以在MDN上閱讀它https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing –

如果你的保證金背景顏色爲您scontainer格顏色，只需指定scontainer的絕對位置。它會出現你想要的。

<style> 
 

 
    .mainform{ 
 
    margin:50px 20px; 
 
    background-color:#444; 
 
    width:100%; 
 
    height:80px; 
 
    } 
 

 
    .scontainer{ 
 
    background-color:#999; 
 
\t width: 100%; 
 
\t position: absolute; 
 
    } 
 
</style> 
 

 

 
<div class="scontainer"> 
 
    <div class="mainform"> 
 
    TST 
 

 
    </div> 
 
</div>

希望這有助於！

來源

2017-02-04 06:57:46

在父項中添加overflow:hidden;。這是由於block formatting context

.scontainer { 
 
    background-color: #999; 
 
    overflow: hidden; 
 
} 
 
.mainform { 
 
    margin: 50px 20px; 
 
    background-color: #444; 
 
    width: 100%; 
 
    height: 80px; 
 
}

<div class="scontainer"> 
 
    <div class="mainform"> 
 
    TST 
 

 
    </div> 
 
</div>

來源

2017-02-04 07:00:14 jafarbtech

HTML CSS樣式保證金不包裝

回答

相關問題