保證金去當邊界被刪除

從實際問題派生的用我的網站上邊界和保證金我做這個測試例子，我認爲行爲有點異樣外格：保證金去當邊界被刪除

<!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

保證金去當邊界被刪除

回答

相關問題