margin 属性はインライン要素には影響しません

マージンは、インライン要素に対してブロックレベル要素とは異なる影響を与えます。インライン要素では、margin 属性は垂直方向の上下のマージンにのみ影響し、水平方向の左右のマージンには影響しません。

たとえば、HTML に段落要素 <p></p> があります。これにいくつかのスタイルを設定し、マージン属性の効果を観察できます。

HTML コードは次のとおりです:

<p class="example">这是一个段落</p>

CSS コードは次のとおりです:

.example {
  margin: 20px;
  background-color: lightblue;
  display: inline;
  padding: 10px;
}

上記のコードは、クラス "example" の段落要素を設定し、そのマージンを設定します。 20px追加、背景色は水色、パディングは10px、表示属性はinline要素に設定されています。

上記のコードをブラウザで実行すると、インライン要素の上下の余白にmargin属性が有効となり、段落要素の上下に20pxの余白が確保されることがわかります。

ただし、インライン要素の左右のマージンを設定しようとすると、設定したマージン値がインライン要素に影響を与えないことがわかります。たとえば、次のコードを試してください。

.example {
  margin: 20px 50px; /* 不会对行内元素产生效果 */
}

サンプル コードでは、インライン要素の上下のマージンを 20 ピクセル、左右のマージンを 50 ピクセルに設定しようとしていますが、ブラウザには表示されません。それをこの余白から外してください。

この現象は、inline 要素に対して margin 属性が完全に無効であることを意味するものではないことに注意してください。パディング プロパティ、表示プロパティ、疑似要素など、他の CSS プロパティやテクニックを利用しても、同様の効果を実現できます。

以上がmargin 属性はインライン要素には影響しませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。