0

我知道“保证金崩溃”的概念。但是，为什么我在这里看不到第一个框顶部的 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 的填充。但是为什么这东西不起作用呢？

4

2 回答 2

2

您的margin: 10px 10px 10px 10px代码中的“主”框也会移动。
如果您只想移动 id 为“first”的框，请使用position:relative; top: 10px;
jsfiddle 演示

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

于 2013-05-26T09:45:31.950 回答
1

这就是浏览器交互代码的方式。它不会输出预期的结果，即孩子的顶部和外部父母之间的 10px 间隙。您可以添加padding-top到父级，或者您可以分配overflow:auto;给您的主 div。

演示 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;
}
于 2013-05-26T10:37:23.760 回答