Margin-Top не работает для элемента span?

Может кто-нибудь сказать мне, что я неправильно закодировал? Все работает, единственное, что сверху нет запаса.

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

В отличие div, p ¹ , которые являются блок уровня элементы , которые способны усваивать marginсо всех сторон, span² не может , поскольку это Инлайн элемент , который занимает поля только по горизонтали.

Из спецификации :

Свойства поля определяют ширину поля поля поля. Сокращенное свойство 'margin' устанавливает поле для всех четырех сторон, в то время как другие свойства поля устанавливают только их соответствующие стороны. Эти свойства применяются ко всем элементам, но вертикальные поля не будут влиять на незаменяемые встроенные элементы.

Демонстрация 1 ( по вертикали marginне применяется , как spanэто inlineэлемент)

Решение? Сделайте свой spanэлемент display: inline-block;или display: block;.

Демо 2

Предложить ли вы использовать , display: inline-block;как это будет inlineтак же , как block. Выполнение этого blockтолько приведет к тому, что ваш элемент будет отображаться на другой строке , так как blockэлементы уровня занимают 100%горизонтальное пространство на странице, если только они не созданы inline-blockили не предназначены floatedдля leftили right.

^{1. Элементы уровня блока - источник MDN}

^{2. Встроенные элементы - ресурс MDN}

Похоже, вы пропустили некоторые параметры, попробуйте добавить:

position: relative;
top: 25px;

spanэто встроенный элемент, который не поддерживает вертикальные поля. divВместо этого поместите поле на внешнюю .

spanэлемент display:inline;по умолчанию вам нужно сделать это inline-blockилиblock

Измените свой CSS, чтобы быть таким

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

Всегда помните одну вещь: мы не можем применить отступ по вертикали к встроенным элементам, если вы хотите применить его, измените его тип отображения на block или inline block. Например, span {display: inline-block;}