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

なぜマージントップはインラインブロックでは機能するが、インラインでは機能しないのか

Web 開発におけるインラインとインラインブロックの違いの理解ページ上の要素の動作を形成するために重要です。この質問は、これら 2 つの表示プロパティ間の上部マージンの適用における不一致を明確にしようとします。

Inline と Inline-Block

CSS2 仕様では、inline を表す値として定義されています。インライン要素。このような要素は、途切れることなく 1 本の連続した線として表示されます。一方、Inline-block はインライン レベルのブロック コンテナーを作成します。つまり、これらの要素はインライン書式設定内のブロックのように動作します。 CSS2 ドキュメントに示されているように:

• Inline: "この値により、要素は 1 つ以上のインライン ボックスを生成します。"
• Inline-block: "この値により、要素はインライン レベルのブロック コンテナを生成します。インライン ブロックの内部はブロック ボックスとしてフォーマットされ、要素自体はアトミック インライン レベルとしてフォーマットされます。 "

マージンの尊重

さらに、CSS2 仕様では、インライン要素のマージンの尊重について次のように概説しています。

"インライン書式設定コンテキストに応じて、ボックスは、含まれるブロックの上部から水平方向に順番に配置されます。これらのボックス間ではボーダーとパディングが尊重されます。"

この区別は、margin-top がインライン要素で機能しない理由を説明します。インライン要素は水平マージンのみを尊重するように制限されていますが、inline-block のようなブロックレベル要素は水平マージンと垂直マージンの両方を尊重します。

例

HTML と CSS を考慮してください。質問で提供されている:

  <link rel="stylesheet" type="text/css" href="MyFirstWebsite.css">
  <title>Max Pleaner's First Website</title>


  <h1 id="Welcome-to-my-site">Welcome to my site.</h1>

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