Question

经过这么长时间我没有问题。

我不明白为什么会出现这个问题

在示例1中，预期结果是正确的，应用父（灰色）和子（红色）之间的边距。

HTML

<div class="parent odd">
    <div class="block"></div>
</div>
<div class="parent even">
    <div class="block"></div>
</div>

CSS

.parent{
    height: 200px;
    padding: 20px;
}

.odd{
    background: #dddddd;
}

.even{
    background: #bbbbbb;
}

.block{
    width: 40%;
    height: 40px;
    background: red;
    margin-top: 20px;
    margin-left: 60px;
}

在示例2中，结果与预期不符，不应用父（深灰色）和您的孩子（绿色）之间的边距

将边距应用于子节点，但在视觉上向下使用块子节点。

http://jsfiddle.net/GUYjJ/

HTML

<section class="row">
    <div class="block left"></div>
    <div class="block right"></div>
</section>
<section class="row features">
    <div class="block"></div>
</section>

CSS

.row{
    height: 540px;
}

.block{
    height: 320px;
    margin-top: 100px;
}

.left, .right{
    width: 40%;
}

.left{
    background: red;
    float: left;
}

.right{
    background: blue;
    float: right;
}

.features{
    background: #454545;
}

.features .block{
    background: green;
    width: 60%;
}

我不明白这种行为的原因。

最诚挚的问候。

Answer 1

向.features

添加一些填充

.features{padding-top:1px;}

DEMO here.

父块和子块之间的边距

1 个答案: