Question

我一直以为我理解利润和负利润，但显然我没有！我刚刚开始设计并遇到问题。

我有一个div（hill3Cont）和另一个div（hill3Hill）嵌套在里面，这是他们的CSS。

#hill3Cont
{
    width: 100%;
    background-image: url("images/grass.jpg");
}
#hill3Hill 
{
    margin: -100px 0 0 0;
    height: 600px;
    width: 100%;
    background: url("images/hill3.png") no-repeat center top;
}

我已经在子div的顶部应用了一个负余量，希望它会将这个内容推到父div的边界之外。但事实并非如此，它并没有动。如果我应用一个正余量，它会将父div与其中的孩子一起推下来。

我可以使其行为正常的唯一方法是使用隐藏在父div上的边框或溢出，但设计将不允许其中任何一个（我不希望隐藏边框和溢出隐藏孩子）

也许这只是漫长的一天，我错过了一些常见的东西！非常感谢提前。

编辑：我有一个解决方案，我在父div上放了一个填充顶部，填充：1px 0 0 0.它适用于我的设计所以我很高兴但仍然很想知道发生了什么。

Answer 1

对于父元素内的子元素，请使用position position和negative top。

http://jsfiddle.net/GEwj3/3/

#hill3Cont
{
    margin-top: 50px;
    width: 200px;
    height: 200px;
    background-color: red;
}
#hill3Hill 
{
    height: 50px;
    width: 100px;
    background: blue;
    position: relative;
    top: -20px;
}

Answer 2

听起来像边缘折叠问题：

http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

Answer 3

我不清楚保证金的负值是否应该给出你想要的行为，而不是被视为零。我会避免将它们视为可能未定义的行为。

Answer 4

http://jsfiddle.net/XVanj/2/ 检查一下

利润率和负利润率

4 个答案: