Margin-Top nie działa dla elementu span?

Czy ktoś może mi powiedzieć, co źle zakodowałem? Wszystko działa, jedyną rzeczą jest to, że nie ma marginesu na górze.

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;
}
Author: Tass, 2012-07-28
Source

5 answers

div, p 1 które są poziomem bloku elementami, które mogą zająć margin ze wszystkich stron,span2 nie można, ponieważ jest to Element Inline , który zajmuje tylko marginesy w poziomie.

Ze specyfikacji :

Właściwości marginesu określają szerokość obszaru marginesu pola. Na właściwość "margin" określa margines dla wszystkich czterech stron, podczas gdy pozostałe właściwości marginesu ustawiają tylko swoje odpowiednie bok. Te właściwości mają zastosowanie do wszystkich elementów, ale marginesy pionowe nie będą miały każdy wpływ na nie wymieniane elementy liniowe.

Demo 1 (pionowe margin nie stosowane jako span jest elementem inline)

Rozwiązanie? Stwórz swój span element, display: inline-block; lub display: block;.

Demo 2

Sugeruje użycie display: inline-block; tak, jak będzie inline, jak również block. Wykonanie go block spowoduje, że twój element będzie renderował na innym Kolejka, jako block elementy poziome zajmują 100% poziomą przestrzeń na stronie, chyba że są wykonane inline-block lub są floated do left lub right.

1. Elementy poziomu bloku - źródło MDN

2. Inline Elements - MDN Resource

 222
Author: Mr. Alien,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-12 13:56:36

Wygląda na to, że przegapiłeś kilka opcji, spróbuj dodać: 

position: relative;
top: 25px;
 42
Author: Freelancer Mahmud,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-11 19:44:22

span jest elementem inline, który nie obsługuje marginesów pionowych. Zamiast tego umieść margines na Zewnętrznej div.

 8
Author: Mr Lister,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-17 05:20:53

span element to display:inline; domyślnie należy go utworzyć inline-block lub block

Zmień swój CSS na taki 

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;*/
}
 2
Author: Egli Becerra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-24 07:04:38

Zawsze pamiętaj o jednej rzeczy nie możemy zastosować marginesu pionowo do elementów inline, jeśli chcesz zastosować to zmień jego typ wyświetlania na block lub inline block.na przykład span{display: inline-block;}

 0
Author: Danny,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-16 16:11:00