インライン HTML 要素で Margin-Top が無視されるのはなぜですか?

HTML5 のマージン - インライン要素で Margin-Top が無視される理由

HTML5 では、span などの一部の要素はインライン要素として分類されます。一方、div や p などはブロックレベルの要素です。これらの分類は、余白がこれらの要素に適用される方法に影響します。

インライン要素について

インライン要素は、テキスト行内で自然に流れるように設計されています。これらは、コンテンツを表示するために必要な最小限の垂直方向のスペースを占有します。そのため、垂直マージンは適用されません。 margin-top を span などのインライン要素に適用すると、単に無視されます。

解決策: Inline-Block または Block Display

span などのインライン要素を指定するには上部にマージンがある場合は、2 つのオプションがあります:

• 表示: inline-block: この設定により、要素はブロック要素のように動作しますが、テキスト行内で流れることができます。水平方向と垂直方向の両方のマージンがサポートされています。
• Display: block: この設定は、要素をブロックレベルの要素に変換し、使用可能な垂直方向と水平方向のスペース全体を占めることができるようにします。ただし、要素は新しい行に表示されます。

例

次の HTML および CSS コードを考えてみましょう:

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