234

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

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

6 に答える 6

368

とは異なりdiv、すべての側面を占めることができるブロック レベル要素であるp 1とは異なり、 2は水平方向のみのマージンを占めるインライン要素であるため、できません。marginspan

仕様から：

マージン プロパティは、ボックスのマージン領域の幅を指定します。'margin' 省略形プロパティは 4 つの辺すべての余白を設定しますが、他の余白プロパティはそれぞれの辺のみを設定します。これらのプロパティはすべての要素に適用されますが、垂直マージンは置換されていないインライン要素には影響しません。

デモ 1 (垂直は要素marginとして適用されません)spaninline

解決？要素spanを作成するdisplay: inline-block;か、display: block;.

デモ 2

display: inline-block;としてinlineもご使用いただけるのでおすすめですblock。レベル要素がページの水平方向のスペースを取るため、それを作成するか、またはする場合を除き、それのみを作成すると、要素が別の行にレンダリングされblockます。block100%inline-blockfloatedleftright

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

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

于 2012-07-28T12:25:01.763 に答える
90

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

position: relative;
top: 25px;
于 2015-08-11T18:53:17.403 に答える
11

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

于 2012-07-28T12:24:11.827 に答える
11

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;*/
}
于 2014-10-17T05:23:34.773 に答える