Margin-Top が CSS の Span 要素で機能しないのはなぜですか?

Margin-Top が Span 要素で機能しない: 解決策

CSS スタイルでは、「margin-top」プロパティが頻繁に使用されます。要素間に垂直方向のスペースを作成します。ただし、span 要素に適用すると、効果的に機能しない可能性があります。この問題は、HTML のブロックレベル要素とインライン要素の基本的な違いにより発生します。

ブロックレベル要素として分類され、四方にマージンを受け入れることができる div 要素や p 要素とは異なり、span はインライン要素。インライン要素はテキスト行内で水平方向に流れるため、垂直方向のマージンを取ることができません。

解決策:

この問題を解決して、スパンに垂直方向のマージンを適用できるようにするには要素の表示プロパティを inline-block または block に変更する必要があります。インラインブロックを使用すると、要素がインライン要素のように動作すると同時に、垂直マージン機能も有効になります。

CSS コード:

span.first_title {
  display: inline-block;  /* or block */
  margin-top: 20px;
  margin-left: 12px;
  font-weight: bold;
  font-size: 24px;
  color: #221461;
}

説明:

span 要素をインラインブロックにすると、インラインの性質が維持されながら、ブロック風になります。プロパティを使用して、垂直方向のマージンを受け入れることができます。あるいは、表示プロパティを block に設定すると、span 要素は完全にブロック要素として動作し、水平スペースの 100% を占有し、別の行にレンダリングされます。

追加メモ:

このシナリオでは、インライン動作とブロック動作のバランスをとるため、display: inline-block を使用することをお勧めします。そうすることで、span 要素はインライン特性を維持しながら、垂直マージンを受け入れる機能も獲得します。

以上がMargin-Top が CSS の Span 要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。