web-dev-qa-db-ja.com

マージン要素がスパン要素に対して機能していませんか？

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

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;
}
cssmarginhtml
155
user1548544

divとは異なり、p 1 ブロックレベル すべての側でmarginを使用できる要素、span2 それは Inline 要素なので、水平方向にのみマージンをとることができません。

仕様 から：

マージンプロパティは、ボックスのマージン領域の幅を指定します。 「margin」速記プロパティは4つの側面すべてにマージンを設定しますが、他のマージンプロパティはそれぞれの側面のみを設定します。これらのプロパティはすべての要素に適用されますが、垂直マージンは非置換インライン要素には影響しません。

デモ1 （垂直変数marginはspanがinline要素であるため適用されません）

溶液？ span要素、display: inline-block;またはdisplay: block;を作成します。

デモ2

inlineとblockになるため、display: inline-block;を使用することをお勧めします。 blockのみにすることで、要素がレンダリングされます 別の行で 、blockレベルの要素は100%を取るためinline-blockにするか、floatedからleftまたはrightにしない限り、ページ上の水平スペース.

1. ブロックレベル要素 -MDNソース

2. インライン要素 -MDNリソース

262
Mr. Alien

いくつかのオプションを見逃したようです。追加してみてください：

position: relative;
top: 25px;
51
Freelancer Mahmud

spanは、垂直マージンをサポートしないインライン要素です。代わりに、外側のdivにマージンを置きます。

8
Mr Lister

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

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

1
Danny