2

源于我网站上的边框和边距的实际问题，我制作了这个测试示例，我认为它有点奇怪：

<!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”的上边距会移动到“外部”？我会认为红色边框会留在相对相同的位置的蓝色和绿色区域内？但事实并非如此。

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

4

4 回答 4

3

您的问题是边距正是名称所说的：它们将边距设置为其他元素，而不是定位偏移量。如果两个元素彼此相邻且具有不同的边距，则它们将被放置在最高边距的位置，这样两个边距都得到满足。在这种情况下，存在 2 个边距，没有任何东西将它们分开，因此从逻辑上讲它们会折叠。

在 .outer 上使用填充应该可以解决这个问题，或者说相对定位。边距严格用于保持与其他元素的距离。

于 2013-04-12T20:08:20.963 回答
3

因为边距是邪恶的（并且往往会崩溃->这是一个错误吗？ P 元素的边距超出了包含 div）。在您的情况下，您可以简单地添加overflow:hidden;到.outer

http://jsfiddle.net/yhAaQ/

于 2013-04-12T20:10:01.107 回答
1

outer2 元素上的边距是从其上方元素的底部计算的，没有应用到 outer2 元素的顶部边距。但是，如果添加边框，则从边框底部计算。

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

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

于 2013-04-12T20:11:44.420 回答
0 

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在margin-top=40pxCSS 中。但实际上，由于不涉及边框，所有边距都只是缩小到最后一个 40px 的边距，它在根父级之外“冒泡”。

于 2018-03-07T14:12:12.870 回答