Question

从我网站上的边框和边距的实际问题中得出我已经制作了这个测试示例，我觉得这有点奇怪：

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color:black;
            }

            .outer {
                width:100px;height:100px;

            }

            .inner {
                margin-top:40px;
                height:20px;
                border:1px solid red;
            }


            #outer-1 {
                background-color:blue;

                border-top:10px solid yellow; 
            }

            #outer-2 {
                background-color:green;

                border-top:none;
            }

            #sep {
                background-color:white;
            }

        </style>
    </head>
    <body>
        <div id="outer-1" class="outer">
            <div class="inner">
                CONTENT
            </div>
        </div>

        <div id="sep">TEST</div>

        <div id="outer-2" class="outer">
            <div class="inner">
                CONTENT
            </div>
        </div>  
    </body>
</html>

为什么在＃outer-2中移除border-top时，“。inner”的上边距会移到“outside”？我原本以为红色边框会留在相同位置的蓝色和绿色区域内？但事实并非如此。

为什么呢？有没有办法让它看起来像我想象的那样？

Answer 1

你的问题是边距正是名称所说的：它们将边距设置为其他元素，而不是定位偏移。如果两个元素彼此相邻，具有不同的边距，则它们将被放置在最高边距之外，这样两个边距都得到满足。在这种情况下，存在2个边距，没有任何区别，因此逻辑上它们会崩溃。

在.outer上使用填充应解决此问题或相对定位。边距严格保持与其他元素的距离。

Answer 2

因为边缘是邪恶的（并且倾向于崩溃 - ＆gt; is it a bug? margins of P element go outside the containig div）。在您的情况下，您只需将overflow:hidden;添加到.outer

即可

http://jsfiddle.net/yhAaQ/

Answer 3

outer2元素的边距是从它上面的元素的底部计算的，没有应用于outer2元素的上边距。但是，如果添加边框，则会从边框底部计算。

此外，当底部和顶部边距应用于彼此跟随的元素时，它们会折叠，这就是盒子模型的工作方式。

如果要控制元素在另一个元素内的偏移量，请使用填充。

Answer 4

body{/* just a reset to simplify example */
    padding:0;
    margin:0
  }
  .inner {
    margin-top:40px;
    height:40px;
    width:40px;
    background-color:blue;
  }
  #outer{
    background-color:green;
    height:60px;
    width:60px;
  }

<div id="outer">
  <div class="inner">
    <div class="inner">
      <div class="inner">
        <div class="inner">
          test
        </div>
      </div>
    </div>
  </div>
</div>

以上代码是您提到的问题的更一般情况。所有.inner在CSS中都有margin-top=40px。但实际上，由于没有涉及边界，所有边缘都会崩溃到40px的最终边缘，这会在根父母之外“冒泡”。

当边界被移除时，保证金会超出div

4 个答案: