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

参见英文答案 > Why does this CSS margin-top style not work?                                    11个
>             Margin-Top not working for span element?                                    5个

<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个跨度,问题就会逆转.

您面临的问题称为 collapsed margin,因此您可以使用position：relative;顶部设置为10px或使用overflow：auto;在父元素上.

Demo(使用overflow：auto;)

Demo 2(使用position：relative; top：10px; top：20px;)

位置：相对;方法将要求你单独设置顶部,因为它将移动你的元素,虽然它物理上保留空间,因此你将不得不加倍为第二个..