保证金管理不当

Question

jsfiddle：http://jsfiddle.net/HFCN3/
将边距放在类.ca中，#div的第一个元素不应用来自#div的边距，而是来自整个身体。怎么解决？

Answer 1

你需要添加填充：0和溢出：隐藏..

<强> HTML

<div id="div">
  <div class='ca'>
    Text
  </div>
  <div class='ca'>
    Text
  </div>
</div>

<强> CSS

body
{
    margin: 0;
    padding:0;
}
#div
{
    width: 300px;
    height: 500px;
    background-color: black;
    color: white;
        overflow: hidden;
}
div .ca
{
    width: 100%;
    height: 50px;
    margin-top: 6px;
        background-color: red;

}

<强>结果

Answer 2

有点难以解释，但保证金需要反弹。 它无法在div的边界上反弹，因此它会在div上反弹。

您可以通过向padding-top: 6px添加#div来解决此问题。

或者你可以使用Itay的解决方案，但是我个人会使用overflow: auto，效果相同，但是当div被假设扩展时，内容不会被隐藏。