第一个跨度的保证金顶部不起作用

Question

<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上的margin-top有效但#cardtitle没有。问题似乎是第一个因素，因为如果我尊重2个跨度，问题就会逆转。

Answer 1

您遇到的问题称为 collapsed margin ，因此您可以position: relative;将top设置为10px或使用{{} {1}}在父元素上。

Demo （使用overflow: auto;）

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

top: 20px;方法将要求您单独设置position: relative;，因为它会移动您的元素，虽然它会物理保留空间，因此您必须为第二个加倍...