边距和负边距答案

【问题标题】：Margins and negative margins边距和负边距
【发布时间】：2011-08-10 15:24:17
【问题描述】：

我一直认为我了解边距和负边距，但显然我不明白！我刚刚开始了一个新设计并遇到了问题。

我有一个 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。它适用于我的设计，所以我很高兴，但仍然很想知道发生了什么。

【问题讨论】：

我不明白为什么事情会这样。在查看了亚历山大的解决方案后，我发现我们已经找到了解决问题的答案，但没有关于为什么你的解决方案不起作用的答案。为什么添加边框会使您的版本工作？！

标签： html css margin

【解决方案1】：

http://jsfiddle.net/XVanj/2/ 也看看这个

【讨论】：

【解决方案2】：

对于父元素内的子元素，请改用相对位置和负顶部。

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;
}

【讨论】：

不幸的是，仍然没有，这是我的场景的一个更接近的例子，我没有边框（这似乎修复了它）jsfiddle.net/GEwj3/1我在它上面加上边框的那一刻修复了它jsfiddle.net/GEwj3/2
好吧，我想我也学到了一两件事。如果您使用负边距，则子元素显然不能从其父元素上方浮动。如果你想这样做，那么使用带有负顶部偏移的相对位置。 jsfiddle.net/GEwj3/3

【解决方案3】：

我不清楚 margin 的负值应该给出你想要的行为，而不是被视为零。我会避免将它们视为潜在的未定义行为。

【讨论】：

【解决方案4】：

听起来像是折叠边距的问题：

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

【讨论】：