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

Question

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;

}

637 5

html css margin

5 ответов:

Comments

Ничего не найдено.

Mr. Alien · Accepted Answer · 2017-08-12 16:56:36

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

С спецификация:

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

демо 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 Ресурс}

Freelancer Mahmud · Accepted Answer · 2015-08-11 22:44:22

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

Mr Lister · Accepted Answer · 2014-10-17 08:20:53

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

Egli Becerra · Accepted Answer · 2014-11-24 09:04:38

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

Danny · Accepted Answer · 2018-03-16 18:11:00

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