html - div 将 margin-top 继承到其父级，而不是在父级内部

Question

我有一个 div 布局，一个带有 margin-top 的 div 没有对其父级的 margin-top，但父级现在有一个 margin-top。如何使 div class=box_container 再次与上面的 div class=container 对齐？

jsfiddle

HTML

        <div class="right">
        <div class="container">
        </div>
        <div class="box_container">
            <div class="boxwrap">
                <div class="box" ></div>    
                <div class="box" ></div>    
                <div class="box" ></div>    
                <div class="box" ></div>    
            </div>
        </div>
    </div>

CSS

.right{
height: 100%;
width: 250px;
background-color: blue;
position:relative;
float: right;
}

.container{
height: 225px;
width: 250px;
background-color: lightsteelblue;
}

.box_container{
height: 140px;
width: 250px;
background-color: darkslategray;
clear: both;
}


.boxwrap{
width: 245px;
height: 50px;
margin-left: 5px;
margin-top:20px;
clear: both;
}

.box{
height: 50px;
width: 50px;
margin-left: 5px;
margin-right: 5px;
float: left;
background-color: red;
}

Answer 1

这被称为“保证金崩溃”。这里的简单解决方案是使用 padding-top 代替，但是当这不合适时，您可以通过为容器提供顶部边框或一些顶部填充来阻止边缘悬挂在容器外。例如

.box_container {
    padding-top: 1px;
}

Answer 2

尝试使用padding而不是margin- 这是你需要的吗？看看这个小提琴 - http://jsfiddle.net/skip405/ALuqW/