Question

当移除footer标记的边框时，margin-top的{{1}}代替适用于页脚标记。

这是我正在使用的代码

<div id="foot">

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

}

这是带边框https://jsfiddle.net/dkp5k1yq/的jsfiddle 在这个边际工作中如预期的那样。这是<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="yourname@domain.com" /> </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/1/上border:none的{{1}}的借口小说＃/ p>

我不想在页脚标签上使用边框，但当我删除边框时，其子边距属性会转移给他。

Answer 1

请参阅MDN's Margin Collapsing，具体来说：

父级和第一个/最后一个孩子

如果没有边框，填充，内联内容，或间隙，以分隔块的边缘顶部 margin-top的第一个子块，或没有边框，填充，内联内容，高度，最小高度或最大高度来分隔在最后一个孩子的边缘底部的块的底部 - 那些利润就会崩溃。倒塌的保证金最终在外面父节点。

在您的第一个fiddle中，父footer有一个边框，因此边距没有崩溃。

在您的第二个fiddle中，父footer没有边框，填充，内联内容或许可，因此边距崩溃，

一种解决方案是改变这种情况：

#foot {
  margin-top: 80px;   
}

......对此：

#foot {
  padding-top: 80px;   
}

Answer 2

快速修复是将display：inline-block添加到#foot或footer标记。

Answer 3

只在.css中创建clearfix类，然后应用于页脚标记

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

HTML

<footer class="clearfix">

当删除边框时，边距从子元素转移到父元素

3 个答案: