【问题标题】:Peculiar behavior of margin css property [duplicate]margin css属性的特殊行为[重复]
【发布时间】:2012-09-09 18:19:51
【问题描述】:

情况是:

CSS:

<style>
#aux1{
    position:relative;      
    background-color:#ccc;
    width:100%;
    height:200px;
}
#aux2{
    display:block;
    background-color:#F00;
    width:100px;
    height:100px;
    margin:20px;
}

</style>

HTML:

<html><head></head>
<body>
    "...some content (div with height: auto)"
    <div id="aux1">
        <div id="aux2">
        </div>
    </div>
</body>
</html>

问题是来自 aux2 的 margin 属性的行为很奇怪,如下图所示:

如果我将溢出:隐藏在 aux1 中,结果趋于正常:

为什么我什至需要使用 overflow:hidden 来让边距(尤其是 margin-top)正常运行?

【问题讨论】:

  • 它是......你是对的。虽然我的问题是关于崩溃的具体案例,但父子 div 案例
  • 重复问题还谈到了父子div边距折叠问题。

标签: html css margin


【解决方案1】:

答案是,ma​​rgin collapsing 就像这个问题一样:Why does this CSS margin-top style not work?

另一个问题参考:What is the point of CSS collapsing margins?

【讨论】:

    猜你喜欢
    • 2010-10-13
    • 2015-04-09
    • 2017-03-10
    • 1970-01-01
    • 2014-02-23
    • 2013-02-13
    • 1970-01-01
    • 2011-06-29
    相关资源
    最近更新 更多