保证金去当边界被删除

从实际问题派生的用我的网站上边界和保证金我做这个测试例子，我认为行为有点异样外格：保证金去当边界被删除

<!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中的边框被移除时，“.inner”移动到“outside”外部？我原以为红色边框会留在蓝色和绿色区域内相对相同的地方？但事实并非如此。

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

来源

2013-04-12 Maya Kathrine Andersen

这是特定于某个浏览器吗？无论哪种方式，示例都适合我。 –

它在最新的Chrome，IE和Firefox中都适用于我。 –

因为利润率是邪恶的（倾向于崩溃 - >is it a bug? margins of P element go outside the containig div）。你的情况，你可以简单地添加从它上面的元件的底部计算与应用到outer2元素没有上边距overflow:hidden;到.outer

http://jsfiddle.net/yhAaQ/

来源

2013-04-12 20:10:01 Kaloyan

你节省了我的一天。非常感谢您使用“overflow：hidden”的实际解决方案。 –

您的问题是，边距正是名称所指出的：它们将边距设置为其他元素，而不是定位偏移量。如果两个元素彼此相邻，并且边距不同，那么它们将被分配到最高的边距，这样两个边距都会得到满足。在这种情况下，2个边界存在，没有分开它们，因此逻辑上它们会崩溃。

在.outer上使用填充应解决此问题或相对定位。边距对于维持与其他元素的距离非常重要。

来源

2013-04-12 20:08:20

你以为我在作为专业人员使用HTML和CSS九年后就知道这一点。我猜浏览器会混淆一个:-) –

的保证金outer2元素。但是，如果添加边框，则会从边框底部计算。另外，当底部和顶部边距应用于相互跟随的元素时，它们就会崩溃，这就是盒子模型的工作方式。

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

来源

2013-04-12 20:11:44 pentzzsolt

Thx。你有非常好的洞察力。 –

@MonkeyZinc很高兴我能帮忙，尤达大师（他的词序，你用过：D）。 – pentzzsolt

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的一个最终边界，这个边界会在根父之外“冒泡”。

来源

2018-03-07 14:12:12 SKG

保证金去当边界被删除

回答

相关问题