Margin-Top not working for span element?

Problem

Could someone please tell me where I went wrong with my coding? Everything is working OK; the only issue is that there is no top margin.

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">info@e-mail.com</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;
}   

Asked by user1548544

Solution #1

In contrast to div and p 1, which are Block Level elements that can take up margin on both sides, span2 is an Inline element that can only take up margin horizontally.

From the specification:

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

Solution? Display: inline-block; or display: block; on your span element.

Demo 2

I recommend using display: inline-block; because it will be both inline and 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. MDN Source – Block Level Elements

2. MDN Resource: Inline Elements

Answered by Mr. Alien

Solution #2

It appears that you have left out some options; try adding:

position: relative;
top: 25px;

Answered by Freelancer Mahmud

Solution #3

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

Modify your CSS to look 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;*/
}

Answered by Egli Becerra

Solution #4

Vertical margins are not supported by span, which is an inline element. Instead, put the margin on the outer div.

Answered by Mr Lister

Solution #5

Always keep in mind that we can’t apply vertical margins to inline items. Change the display type to block or inline-block if you want to apply vertical margins.

span {
    display: inline-block;
}

Answered by Danny

Post is based on https://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element