CSS のインライン要素に対するパディングは実際にどのように機能するのでしょうか?

インライン要素のパディング: 探索

インライン要素のパディングの概念は、特にマージンとの相互作用に関して、しばしば混乱を引き起こします。プロパティ。この記事では、インライン要素のパディングの特性を詳しく掘り下げ、一般的な誤解に対処します。

インライン要素のパディング: 誤解

一部の情報源ではインラインであると主張している場合がありますが、要素には完全なパディングプロパティがありますが、これは完全に正確ではありません。インライン要素には確かにパディングを含めることができますが、垂直方向 (上と下) のマージンを適用する機能がありません。 CSS 仕様では、これらのプロパティは置換されていないインライン要素には「影響を与えない」と明示的に述べられています。

継承とマージンの非影響

ただし、「いいえ」 「効果」は、プロパティが存在しないことを意味するものではありません。これらは、インライン要素に直接適用された場合には単に無視されます。それにもかかわらず、それらは継承において役割を果たします。次の例に示すように、子として使用する場合、マージンを継承してブロック要素に適用できます。

p { border: 1px solid red; }
i { vertical-align: top; }
span { margin-top: 20px; margin-bottom: 20px; }
b { display: inline-block; }
.two { margin: inherit; }

<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p>
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

The Mystery ofvertical Padding

もう 1 つのよくある誤解は、インライン要素は垂直方向のパディングを受け入れられないということです。確かに、padding-top とpadding-bottom はテキスト コンテンツには効果がないと思われるかもしれませんが、周囲の要素に影響を与えます。あなたの例では、「hello」テキストの周囲のパディングはテキストを上下に押し出すため表示されませんが、テキスト自体は元の行内に残ります。

以上がCSS のインライン要素に対するパディングは実際にどのように機能するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。