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

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

Answer 1

你面临的问题,被称为倒塌的保证金,因此,无论是您可以使用position: relative;与top设置为10px或使用overflow: auto;父元素.

演示 (使用overflow: auto;)

演示2 (使用position: relative;+ top: 10px;和top: 20px;)

position: relative;方法将要求你top单独设置,因为它将移动你的元素,虽然它物理上保留空间,因此你将不得不加倍为第二个..