Question

我有一个主div（页面），它有另一个内部div（中央）。我为这两个div应用了CSS。我在CSS中分别给出了两个div的margin-top属性，但内部div的margin-top也应用于外部div。我该如何解决这个问题？

CSS：

#page
{
    position: relative;
    margin: auto;
    margin-top: 40px;
    margin-left: auto;
    background-color: #b3dced;
    height: 900px;
    width: 900px;
    border-radius: 10px;
}
.central
{
    position: relative;
    margin: auto;
    margin-top: 80px;
    background-color: blue;
    height: 500px;
    width: 500px;
    border: 2px solid green;
    border-radius: 10px;
}

Align the divs fiddle link

<body>
    <div id="page">
        <div class="central">
            <table>
                <tr>
                    <td>name</td>
                    <td><input type="text" /></td>
                </tr>
                <tr>
                    <td>name</td>
                    <td><input type="text" /></td>
                </tr>
                <tr>
                    <td>name</td>
                    <td><input type="text" /></td>
                </tr>
            </table>
        </div>
    </div>
</body>

Answer 1

该问题称为Margin Collapsing。

当两个元素的垂直边距接触时，只有具有最大边距值的元素的边距将被尊重，而具有较小边距值的元素的边距将折叠为零。

您可以在子元素上使用padding或top来避免这种情况。或者在父级上添加一点填充。像这样：

#page {
  padding-top:1px;
}

选中http://jsfiddle.net/269Pw/6/。

在此Article上，您可以找到有关此问题的更多信息以及解决此问题的多种方法。

Answer 2

有不同的方法可以做到这一点。有关使用position: relative的详情，请参阅Stack Overflow post Position an HTML element relative to its container using CSS 。

但有时根据您自己的代码更容易学习：

#page
{
    position: relative;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    background-color: #B3DCED;
    height: 900px;
    width: 900px;
    border-radius: 10px;
}
.central
{
    position: absolute;
    margin-top: 80px;
    margin-left: 200px;
    margin-right: 200px;
    background-color: blue;
    height: 500px;
    width: 500px;
    border: 2px solid green;
    border-radius: 10px;
}

无法正确对齐嵌套的div

2 个答案: