Margin-Topはスパン要素に対して機能しませんか？

誰かが私が間違ってコーディングしたことを教えてもらえますか？すべてが機能しています。唯一のことは、上部にマージンがないことです。

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'省略形プロパティは4つの辺すべてのマージンを設定しますが、他のマージンプロパティはそれぞれの辺のみを設定します。これらのプロパティはすべての要素に適用されますが、垂直マージンは、置換されていないインライン要素には影響しません。

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

インライン要素に垂直方向にマージンを適用できない1つのことを常に覚えておいてください。適用したい場合は、その表示タイプをブロックまたはインラインブロックに変更してください。たとえば、span {display：inline-block;}