css - 使用 DIV、HTML 和 CSS 的边距问题

Question

我正在为一个研究元素使用这个免费模板:jsFiddle

我的问题出现在我使用 IE7 时，因为带有 id="outerwrapper"的 DIV 的底部边距完全消失了。

在这里你可以找到外包装的CSS代码:

div#outerwrapper {
    margin: 20px auto;
    width: 960px;
    margin-bottom: 20px;
    background-color: #CEC7AA;
    -moz-box-shadow: 0 0 3px 3px #333;
    -webkit-box-shadow: 0 0 3px 3px #333;
    box-shadow: 0 0 3px 3px #333;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
}

有什么建议吗？

Answer 1

margin 需要一些东西来“反弹”。它不能“反弹”到 body 上。因此，与其对子级使用 margin-bottom，不如对父级使用 padding-bottom:

body {
   padding-bottom: 50px;
}