[解決済み】span要素で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">[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;
}   

解決方法は？

とは異なり div , p ¹ である。 ブロックレベル 要素を使用することができます。 margin を四方に配置する。 span ² であるためできません。 インライン 要素で、水平方向にのみ余白を取ります。

から 仕様 :

Marginプロパティは、ボックスのマージン領域の幅を指定します。このプロパティは 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リソース}