Margin top of first span not working [duplicate]

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;
}

Okay the margin-top on #cardinfo works but #cardtitle doesn't. The problem seems to be the first element, as the problem reverses if i reverese the 2 spans.

Answer 1

The issue you are facing, is called collapsed margin, hence either you can use position: relative; with top set to 10px or use overflow: auto; on the parent element.

Demo (Using overflow: auto;)

Demo 2 (Using position: relative; + top: 10px; and top: 20px;)

position: relative; method will require you to set the top separately as it will move your element, though it physically reserves the space, hence you will have to double up for the second one..