保證金最高不工作

<div class ="cards"> 
    <span id="cardtitle"> 
    Chance 
    </span> 
    <span id="cardinfo"> 
    Your ass is going to jail. 
    </span> 
</div>

.cards{ 
    background: #F8F8F8 ; 
    height: 100px; 
    margin: 0 auto; 
    width: 200px; 
} 
#cardtitle, #cardinfo{ 
    background: #ffcc00; 
    display: block; 
    margin-top: 10px; 
    width: 100px; 
}

奧凱的邊距上#cardinfo作品，但#cardtitle沒有。這個問題似乎是第一個因素，因爲如果我敬畏這兩個跨度，這個問題就會逆轉。保證金最高不工作

來源

2014-01-18 Elton Frederik

這是因爲[margin margin]（http://reference.sitepoint.com/css/collapsingmargins）。 –

沒有它的不重複，因爲margin-top在爲我工作，雖然不適用於第一個span元素。 –

@EltonFrederik是的，我意識到我關閉後，我非常抱歉，當我意識到 –

你所面臨的問題，被稱爲collapsed margin，所以要麼你可以使用position: relative;與top設置爲10px或父元素上使用overflow: auto;。

Demo（使用overflow: auto;）

Demo 2（使用position: relative; + top: 10px;和top: 20px;）

position: relative;方法需要您設置top分開，因爲它會移動你的元素，雖然它在物理保留空間，因此你將不得不爲第二個翻倍..

來源

2014-01-18 10:00:52

@ Alien先生的時候，我已經回答了，但是我可以問爲什麼我需要'overflow：auto;'我以爲是默認。我的div足夠容納2個跨度...？ –

@EltonFrederik它定義了新的塊格式上下文，你也可以使用'overflow：hidden;'......你喜歡的任何一個 –

保證金最高不工作

回答

相關問題