边距和负边距 [英] Margins and negative margins

问题描述

我一直认为我明白了利润和负利润，但显然我不是！我刚刚开始一个新的设计，并已经遇到了问题。

I've always thought I understood margins and negative margins but apparently I don't! I've just started a new design and running into problems already.

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

I have a div (hill3Cont) and another div (hill3Hill) nested inside, and this is the CSS for them.

#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和它里面的孩子一起推。

I have applied a negative margin to the top of the child div in the hope it will push this content up outside the boundaries of the parent div. But it doesn't, it doesn't move. If I apply a positive margin it pushes the parent div down along with the child inside it.

我可以使它的行为正确的唯一方法是使用边框或溢出隐藏在父div，但设计不会允许这些（我不想要一个边框和溢出隐藏隐藏的孩子）。

The only way I can make it behave properly is use a border or overflow hidden on the parent div, but the design won't allow for either of these (I don't want a border and overflow hidden hides the child).

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

Maybe it's just been a long day and I'm missing something common! Many thanks in advance.

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

I have got a solution, I've put a single padding top on the parent div, padding: 1px 0 0 0. It works for my design so I'm happy but still keen to find out what's happening.

推荐答案

听起来像一个问题具有折叠边距：

Sounds like a problem with collapsing margins:

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

这篇关于边距和负边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！