css保证金问题

Question

我的css看起来像这样

* {
     margin: 0;
     padding: 0;
}
body {
    background-color: #FFFFFF;
}
div#header {
    background-color: #969696;
    height: 80px;
}
div#mid-bar {
    background: url(images/home.jpg) left no-repeat #6f6565;
    height: 200px;
}

#searchbox {
    background-color: #c1c1c1;
    width: 200px;
    height: 180px;
    margin: 10px 20px 10px 350px;
}

和我的HTML

    <div id="header">

    </div>
    <div id="mid-bar">
        <div id="searchbox">

        </div>
    </div>

你可以看到问题。标题和mid-bar之间的空格，由于searchbox div中给出的边距而创建。 我希望在mid-bar div中搜索框的这个边距...而不是来自标题div。

Answer 1

我知道bug：会使用填充而不是边距。这样：

div#mid-bar {
    background: url(images/home.jpg) left no-repeat #6f6565;
    height: 200px;
padding-top: 10px;
}


#searchbox {
    background-color: #c1c1c1;
    width: 200px;
    height: 180px;
    margin: 0px 20px 10px 350px;
}

Answer 2

将填充提供给＃mid-bar而不是搜索框边距

Answer 3

我已经看到这种情况发生在你没有给父母提供保证金时，第一个元素，即使是你给予保证金的孩子，也会通过创造利润导致父母的差距。我克服这个问题的一种方法是在父容器上使用填充而不是边距。

请在此处查看带有填充的示例：http://jsbin.com/ememi3

Answer 4

如果您打算使用边距，请尝试在＃mid-bar中设置margin:0;。否则，将＃mid-bar设为padding-top:10px;并从#searchbox中移除上边距。

Answer 5

每个人似乎都同意这一点，填充将比利润更好。我稍微调查了一下，似乎Pixeline是对的，这是Firefox中的一个已知错误，希望他们能在4中修复它。