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

Завжди пам’ятайте про одне, що ми не можемо застосовувати поля вертикально до вбудованих елементів, якщо ви хочете застосувати, то змініть його тип відображення на блок або вбудований блок. Наприклад, проміжок {display: inline-block;}