インライン要素には本当に「margin-top」プロパティと「margin-bottom」プロパティが欠如しているのでしょうか？

インライン要素のパディング

インライン要素のプロパティに関して、パディングとマージンに関する一般的な質問が生じます。いくつかの情報源によると、インライン要素には完全なパディング プロパティがありますが、margin-top および margin-bottom プロパティがなく、margin-left と margin-right のみがあります。

公式の Margin 固有のステートメントの場所

第一に、この主張は W3 標準内に見られる決定的な記述ではありません。ただし、ボックス モデルでは、margin-top と margin-bottom は「置換されていないインライン要素には影響を与えない」と述べています。

Margin プロパティの「影響なし」について

この文脈における「影響なし」は、プロパティが存在しないことを意味するものではありません。代わりに、これらのプロパティがインライン要素の位置に影響を与えないことを意味します。ただし、これらは継承の目的で存在します。

例: マージン プロパティの継承

次のコードを考えてみましょう。

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>

Inこの例では、2 行目のマージンは、.two ルールにより親スパンから継承されます。含まれている要素からマージン値を継承するこの動作は、テキストなどのインライン要素の位置に直接影響しないにもかかわらず、margin-top プロパティと margin-bottom プロパティが存在することを示しています。

Inline のパディング プロパティ要素

インライン要素には完全なパディング プロパティがありますが、padding-top と padding-bottom は期待どおりに周囲のテキストに影響を与えない可能性があります。これは、インライン要素には本質的にデフォルトで高さが定義されていないためです。その結果、padding-top または padding-bottom を設定しても、周囲のテキストに対する要素のサイズや位置が視覚的に変更されない可能性があります。

以上がインライン要素には本当に「margin-top」プロパティと「margin-bottom」プロパティが欠如しているのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。