刪除邊框時從子元素到父元素的邊距變化

當刪除footer標籤的邊框時<div id="foot">的margin-top替代應用於頁腳標籤。刪除邊框時從子元素到父元素的邊距變化

這裏是我使用

footer { 
    background: #0096D6; 
    width: 100%; 
    height: 250px; 
    color: #fff; 
    border: #FF0004 1px solid; 
} 
#foot { 
    width: 1136px; 
    margin: 0 auto; 
    margin-top: 80px; 

}

<footer> 
<div id="foot"> 
    <div id="subscribe"> 
    <b>Subscribe</b><br><br>Get the latest news, events, updates and offers from the team and people working in DigitNomics.<br><br><input type="email" name="email" id="email" placeholder="[email protected]" /> 
    </div> 
    <span id="development"> 
     <ul> 
      Current Development 
      <a href="#"><li>Demo</li></a> 
      <a href="#"><li>ALPHA Development</li></a> 
      <a href="#"><li>BETA Development</li></a> 
     </ul> 
    </span>  
</div> 
</footer>

這裏是邊境https://jsfiddle.net/dkp5k1yq/ 的的jsfiddle在這個邊距按預期方式工作的代碼。這裏是footerhttps://jsfiddle.net/dkp5k1yq/1/

的Seconde系列的jsfiddle與border:none我不想在頁腳標籤使用的邊界，但是當我刪除邊框及其子保證金財產轉讓給他。

來源

2015-09-01 Akash Kumar

這不清楚你在這裏問什麼。在頁面加載併發生了某些操作或事件後，邊距是否會從一個元素更改爲另一個元素？ – hungerstar

我不想在頁腳標籤上使用邊框，但是當我刪除邊框時，其子保證金屬性將轉移給他。 –

試着設置padding-top：80px，而不是邊距，它很快就修復了.... – sinisake

見MDN's Margin Collapsing，具體如下：

家長和第一/最後一個孩子

如果th內容或內容內容，高度，最小高度，最小高度，最小高度，最小高度，最小高度，最小高度，或最大高度來分隔塊的邊緣底部與其最後一個子塊的邊緣底部，然後這些邊距摺疊。父母不在之外，摺疊的保證金結束。

在你的第一個fiddle，家長footer有一個邊界，因此保證金沒有崩潰。

在你的第二個fiddle，父footer沒有邊框，填充，內嵌的內容，或清關等保證金沒有崩潰，

一種解決方案是可以改變：

#foot { 
    margin-top: 80px; 
}

＆hellip;對此：

#foot { 
    padding-top: 80px; 
}

來源

2015-09-01 20:50:42

快速解決方法是將display：inline-block添加到#foot或footer標記中。

來源

2015-09-01 20:39:29

只有讓你的CSS的clearfix類，然後應用到頁腳標籤

.clearfix:before, .clearfix:after { 
    content: ""; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    *zoom: 1; 
}

HTML

<footer class="clearfix">

來源

2015-09-01 20:41:57 ojcastaneda

刪除邊框時從子元素到父元素的邊距變化

回答

相關問題