Margin-Top funktioniert nicht für Span-Element?

Kann mir jemand sagen, was ich falsch codiert habe? Alles funktioniert, das einzige ist, dass es oben keinen Rand gibt.

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

Im Gegensatz div, p ¹ , den Block Level Elemente , die in Anspruch nehmen können marginauf allen Seiten, span² kann nicht , wie es ein ist Inline - Element , das die Margen nur horizontal in Anspruch nimmt.

Aus der Spezifikation :

Randeigenschaften geben die Breite des Randbereichs eines Felds an. Die Abkürzungseigenschaft 'margin' legt den Rand für alle vier Seiten fest, während die anderen Randeigenschaften nur die jeweilige Seite festlegen. Diese Eigenschaften gelten für alle Elemente, vertikale Ränder haben jedoch keine Auswirkungen auf nicht ersetzte Inline-Elemente.

Demo 1 (Vertikal marginnicht angewendet wie spanein inlineElement)

Lösung? Machen Sie Ihr spanElement, display: inline-block;oder display: block;.

Demo 2

Würde vorschlagen, dass Sie verwenden, display: inline-block;wie es sein wird, inlinesowie block. Wenn Sie es blocknur erstellen, wird Ihr Element in einer anderen Zeile gerendert , da blockebene Elemente 100%horizontalen Platz auf der Seite einnehmen , es sei denn, sie werden erstellt inline-blockoder befinden sich floatedin leftoder right.

^{1. Block Level Elements - MDN-Quelle}

^{2. Inline-Elemente - MDN-Ressource}

Sieht so aus, als hätten Sie einige Optionen verpasst. Versuchen Sie hinzuzufügen:

position: relative;
top: 25px;

spanist ein Inline-Element, das keine vertikalen Ränder unterstützt. Legen Sie divstattdessen den Rand auf die Außenseite .

spanElement ist display:inline;standardmäßig müssen Sie es machen inline-blockoderblock

Ändern Sie Ihr CSS so

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

Denken Sie immer daran, dass wir den Rand nicht vertikal auf Inline-Elemente anwenden können. Wenn Sie ihn anwenden möchten, ändern Sie den Anzeigetyp in Block oder Inline-Block. Beispiel: span {display: inline-block;}