给子div相对于父div的边距

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的200像素，则它只会获得页边空白。有什么办法可以使childDiv相对于parentDiv获得22px的父级div，而无需进行某种类型的“给父div一个1px的填充”黑客？

Answer 1

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

如果你float: left;像.childDiv我在JS Fiddle中那样，它将根据需要应用边距。