4
<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.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Elton Frederik
  • 259
  • 1
  • 3
  • 12

1 Answers1

9

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..

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • @ Mr Alien, it worked, but can I ask why I needed `overflow: auto;` i thought that was by default. My div was big enough to accomodate the 2 spans...? – Elton Frederik Jan 18 '14 at 10:04
  • @EltonFrederik It defines new block formatting context, you can also use `overflow: hidden;` too... either one you like – Mr. Alien Jan 18 '14 at 10:06
  • You may use position:absolute and then top, right, left and bottom to position the element as per your choice. – Vivek Singh Jun 27 '20 at 13:06