Question

我知道'保证金崩溃'的概念。但是，为什么我无法在第一个框here的顶部看到10 px边距。顶部框（id为'first'）应该在其上方有10px的边距。如果这不是正确的扫描仪，那么它是什么？而且，为什么这不起作用。

CSS：

#Main{
background-color: gray;
position: relative;
width: 200px;
height: 300px;  
}


.box{
position:relative;
height: 60px;
width: 175px;
background: black;
margin: 10px 10px 10px 10px;
}

HTML：

<div id="Main"> 
    <div id="first" class="box"></div>
    <div id="second" class="box"></div>
    <div id="third" class="box"></div>
</div>

我知道一种方法是我们可以给父div提供10px填充。但那么为什么这件事不起作用呢？

Answer 1

代码中的margin: 10px 10px 10px 10px也会移动“Main”框如果您想仅移动ID “first”的复选框，请使用position:relative; top: 10px;
jsfiddle demo

编辑：我不知道为什么会发生这种情况，但我的猜测是因为默认情况下“Main”框的display为block。
当您在“Main”框中使用display: inline-block;时，问题就解决了。（jsfiddle）

Answer 2

这就是浏览器如何兼顾代码。它不输出预期的结果，即在孩子的顶部和外部父母之间的10px间隙。您可以将padding-top添加到父级，也可以将overflow:auto;分配给您的主div。

DEMO http://jsfiddle.net/kevinPHPkevin/2f4Kz/4/

#Main {
    background-color: gray;
    position: relative;
    width: 200px;
    height: 300px;
    overflow:auto;
}

另一种方法是在主div周围添加透明边框（停止边距折叠）

#Main {
        background-color: gray;
        position: relative;
        width: 200px;
        height: 300px;
        border: thin solid transparent;
    }

第三个最终选项（据我所知）是通过将padding-top: 1px; margin-top: -1px;设置为父div来阻止边距折叠

#Main {
    background-color: gray;
    position: relative;
    width: 200px;
    height: 300px;
    padding-top: 1px;
    margin-top: -1px;
}

为什么'margin-top'财产不起作用？

2 个答案: