Margin-Top がスパン要素で機能しないのはなぜですか?

マージントップがスパン要素に対して機能しない?

マージントップスタイルをスパン要素に追加すると、状況が発生する可能性がありますここでマージンは無視されているように見えます。この動作を理解するために、CSS のインライン レベル要素とブロック レベル要素の基本的な違いを詳しく見てみましょう。

四辺のマージンを受け入れることができるブロック レベル要素である div 要素や p 要素とは異なり、span 要素は要素はインライン要素として分類されます。単語などのインライン要素には、本質的に垂直方向のマージンやパディングがありません。これは、テキスト コンテンツ内で水平方向に流れるように意図されているためです。

CSS 仕様によると、「垂直方向の余白は、置換されていないインライン要素には影響を与えません」。したがって、span 要素に margin-top または margin-bottom を適用しても、視覚的な影響はありません。

span 要素にマージンを提供するには、その表示スタイルを操作します。表示プロパティを「inline-block」または「block」に設定すると、インライン要素をブロック状の要素に効果的に変換できます。この変換により、垂直方向のマージンを受け入れ、他のブロックレベル要素と同様に動作できるようになります。

これは、インライン ブロック スタイルを適用する CSS コードの改訂版です。 first_title スパン:

 表示: inline-block;
 margin-top: 20px;
 margin-left: 12px;
 font-weight: 太字;
 font-size: 24px;
 color: #221461;
}
< /pre>
この変更により、span 要素が周囲のテキストと一緒に流れる機能などのインライン プロパティを維持しながら、ブロックのような要素として表示されます。 margin-top プロパティが有効になり、要素は上から 20 ピクセルのマージンを持ちます。
「display: block」を使用すると、span 要素が変換されることに注意してください。全幅ブロックに変換しますが、これは必ずしも望ましいとは限りません。したがって、要素全体に垂直方向のマージンを提供するには、一般に「display: inline-block」の方が良い選択となります。
以上がMargin-Top がスパン要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。