CSS の「margin-top」は「inline-block」では機能するのに、「inline」では機能しないのはなぜですか?

矛盾を明らかにする: Margin-Top は Inline-Block では機能するが、Inline では機能しない理由

CSS スタイルの領域では、表示プロパティとマージンの動作により、複雑なシナリオが発生する場合があります。そのような例の 1 つは、margin-top が inline-block では動作するが、inline では動作しないという興味深いケースです。

次の CSS スニペットを考えてみましょう。要素では、この宣言は上マージンの作成に失敗します。ただし、表示プロパティが inline-block に変更されると、margin-top が突然有効になります。

h1 {
    display: inline;
    margin-top: 25px;
}

この謎を解明するために、CSS2 仕様を深く掘り下げていきます。セクション9.2.4によると、インラインブロック要素はインラインレベルのブロックコンテナを生成し、基本的に要素をアトミックなインラインレベルボックスとして扱います。対照的に、セクション 9.2.4.

で述べられているように、インライン要素は 1 つ以上のインライン ボックスを生成します。重要なことに、CSS2 仕様のセクション 9.4.2 では、インライン要素は垂直マージンを無視し、水平マージンのみを考慮することが説明されています。一方、ブロックレベルの要素は、水平方向と垂直方向のマージンの両方を尊重します。

したがって、インライン要素とインラインブロック間の不一致は、インライン要素とブロック要素の動作の違いに起因します。 inline などのインライン要素は、水平方向に次々とレイアウトされるため、水平方向のマージンのみを考慮します。一方、インラインブロック要素は事実上ブロックとして扱われ、margin-top のような垂直マージンを尊重する機能など、ブロックレベル要素のよく知られた動作を示します。

以上がCSS の「margin-top」は「inline-block」では機能するのに、「inline」では機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。