Question

这是我的HTML：

<div class='parentDiv'>
    <div class='childDiv'></div>
</div>

这是我的CSS：

.parentDiv {
    margin-top: 200px;
    width: 700px;
    height: 800px;
    background-color: red;
}

.childDiv {
    background-color: green;
    width: 50px;
    height: 50px;
    margin-top: 22px;
}

小提琴：http://jsfiddle.net/1whywvpa/

为什么childDiv没有获得22px的保证金？如果像素大于已经给予parentDiv的200px，则它仅获得上边距。任何方法可以让childDiv相对于parentDiv得到22px的父div，而不做某种类型的＆＃39;给父div一个1px填充＆＃39;劈？

Answer 1

也许这可以提供帮助：CSS Margins Overlap Problem

向两个元素添加位置属性。家长为relative，孩子为absolute ...

.parentDiv {
    position: relative;
    margin-top: 200px;
    width: 700px;
    height: 800px;
    background-color: red;
}

.childDiv {
    position: absolute;
    background-color: green;
    width: 50px;
    height: 50px;
    margin-top: 22px;
}

这是你的小提琴：http://jsfiddle.net/algorhythm/1whywvpa/5/

Answer 2

看起来.childDiv没有向左浮动。

如果您float: left; .childDiv {{1}}，就像我在JS Fiddle中一样，它会根据需要应用保证金。

Answer 3

在这种情况下，您不想使用保证金。您应该向父div添加填充。您还需要关闭父div。因此，删除子div上的margin-top:22px。在父div上添加padding-top:22px;。

Answer 4

将子div作为包含父div的百分比：

.parentDiv {
    position: relative;
    margin-top: 200px;
    width: 700px;
    height: 800px;
    background-color: red;
    }

.childDiv {
    position: absolute;
    background-color: green;
    width: 7%;
    height: 6%;
    margin-top: 1%;
    }

给子div一个相对于父div的边距

4 个答案: