「margin-top」は「inline-block」では機能するのに、「inline」では機能しないのはなぜですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Mary-Kate Olsen

Nov 27, 2024 am 10:10 AM

Why Does `margin-top` Work with `inline-block` but Not with `inline`?

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

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

Inline と Inline-Block

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

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

マージンの尊重

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

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

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

例

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

<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="MyFirstWebsite.css">
  <title>Max Pleaner's First Website</title>
</head>
<body>
  <h1>Welcome to my site.</h1>
</body>
</html>

ログイン後にコピー

body {
  background-image: url('sharks.jpg');
}

h1 {
  background-color: #1C0245;
  display: inline;
  padding: 6.5px 7.6px;
  margin-left: 100px;
  margin-top: 25px;
}

ログイン後にコピー

この場合、h1 要素は表示プロパティがインラインに設定されている場合、100px の水平マージンが表示されます。ただし、表示プロパティが inline-block に変更されると、h1 要素がインラインコンテキスト内のブロックレベルの要素として扱われるため、25 ピクセルの margin-top が適用されます。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。