Margin-Top not working for span element?

Can someone tell me what I coded wrong? Everything is working, the only thing is that there is no margin at the top.

HTML:

<div id="contact_us"> <!-- BEGIN CONTACT US -->
  <span class="first_title">Contact</span>
  <span class="second_title">Us</span>
  <p class="content">For any questions whatsoever please contact us through the following e-mail address:</p></br></br>
  <p class="e-mail">[email protected]</p></br></br></br></br>
  <p class="read_more"><a href="underconstruction.html">Read More</a></p>
</div> <!-- END CONTACT US -->

CSS:

span.first_title {
  margin-top: 20px;
  margin-left: 12px;
  font-weight: bold;
  font-size: 24px;
  color: #221461;
}

span.second_title {
  margin-top: 20px;
  font-weight: bold;
  font-size: 24px;
  color: #b8b2d4;
}	

Unlike div, p ¹ which are Block Level elements which can take up margin on all sides,span² cannot as it's an Inline element which takes up margins horizontally only.

From the specification:

> Margin properties specify the width of the margin area of a box. The > 'margin' shorthand property sets the margin for all four sides while > the other margin properties only set their respective side. These > properties apply to all elements, but vertical margins will not have > any effect on non-replaced inline elements.

Demo 1 (Vertical margin not applied as span is an inline element)

Solution? Make your span element, display: inline-block; or display: block;.

Demo 2

Would suggest you to use display: inline-block; as it will be inline as well as block. Making it block only will result in your element to render on another line, as block level elements take 100% of horizontal space on the page, unless they are made inline-block or they are floated to left or right.

---

^{1. Block Level Elements - MDN Source}

^{2. Inline Elements - MDN Resource}

Looks like you missed some options, try to add:

position: relative;
top: 25px;

span is an inline element that doesn't support vertical margins. Put the margin on the outer div instead.

span element is display:inline; by default you need to make it inline-block or block

Change your CSS to be like this

span.first_title {
    margin-top: 20px;
    margin-left: 12px;
    font-weight: bold;
    font-size:24px;
    color: #221461;
    /*The change*/
    display:inline-block; /*or display:block;*/
}

Always remember one thing: we can not apply margin vertically to inline elements. If you want to apply vertical margins then change its display type to block or inline-block

span {
    display: inline-block;
}

<span>tag doesn't accept margin, padding you need to add some css style and make your <span> tag as block or inline-block in order to use margin, padding for <span> tags, but the best way to use is div tag.

span{ display:inline-block or block;}