ホームページ >ウェブフロントエンド >CSSチュートリアル >「margin-top」は「inline-block」では機能するのに、「inline」では機能しないのはなぜですか?
「margin-top」は「inline-block」では機能するのに、「inline」では機能しないのはなぜですか?
- Mary-Kate Olsenオリジナル
- 2024-11-27 10:10:10951ブラウズ
なぜマージントップはインラインブロックでは機能するが、インラインでは機能しないのか
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 サイトの他の関連記事を参照してください。