Margin-Top は Inline-Block では機能するのに、Inline 要素では機能しないのはなぜですか?

インライン要素およびインラインブロック要素のマージンの動作

CSS では、マージン スタイルの動作は、要素の表示プロパティに応じて異なる場合があります。要素。この質問では、インライン要素とインラインブロック要素のマージントップの動作の相違について調査します。

インライン要素

指定されたコードでは、h1 要素は最初に次のように設定されています。表示: インライン。 CSS2 仕様によれば、インライン要素は 1 つ以上のインライン ボックスとしてフォーマットされます。これらのボックスは水平方向にレイアウトされ、水平方向のマージン (左右のマージンなど) のみが考慮されます。その結果、margin-top プロパティは無視されます。

Inline-Block Elements

表示プロパティが inline-block に変更されると、h1 要素はインラインブロックコンテナ。これは、インライン フローを維持しながら、コンテナ内でブロック要素のように動作することを意味します。ブロック要素は、margin-top を含め、水平方向と垂直方向の両方のマージンを尊重します。したがって、表示が inline-block に設定されている場合、margin-top プロパティは期待どおりに適用されます。

結論

インラインとインラインのマージン動作の違い-block 要素は、基本的なレイアウトの違いに起因します。インライン要素は水平にレイアウトされ、水平マージンのみを尊重しますが、インラインブロック要素はブロックのようにフォーマットされ、水平マージンと垂直マージンの両方を尊重します。この理解は、CSS レイアウト内の要素の位置を制御するために非常に重要です。

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