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

Ответ 1

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

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

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

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

Ответ 2

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

position: relative;
top: 25px;

Ответ 3

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

Ответ 4

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