CSSでマージンが機能しない理由と解決策

Margin は要素間の間隔を指定する属性ですが、インライン要素ではマージンを指定することができません。CSS でマージンが機能しない原因と解決策を紹介します。

margin が機能しない理由

初心者の場合、margin 属性を設定しても機能しないことがよくあります。

マージンを理解する前に、まずボックス モデルを見てみましょう

マージンが機能しない理由は、多くの場合、表示が機能していないことが原因です。 「display:block」または「display:inline」が考慮されます。

具体的な例を見てみましょう

HTML

<h3 id="这是一个内联块">这是一个内联块</h3>

CSS

h3{
  display:inline-block;
  background:#ffff00;
  width:12em;
  text-align:center;
  margin:0 auto;
}

ブラウザでの表示効果は次のとおりです:

"margin :0 auto;" inline -block は効果がありません。

「inline-block」を数値で指定することはできますが、「margin: 0 auto;」によるセンタリングは機能しません。

「text-align: center;」は親要素をセレクターにしません

「text-align: center;」の基本ルールは「セレクターが親要素」です。上の例では、中央に配置したい場合は、親要素を作成する必要があります。

上記を理解したら、問題を解決できます。

HTML

  <h3 id="这是一个内联块">这是一个内联块</h3>

CSS

h3{
  display:inline-block;
  background:#ffff00;
  width:12em;
  margin:0 auto;
}
.wrap{
  text-align:center;
}

効果は次のとおりです:

##この記事margin 属性の詳細については、php 中国語 Web サイトの

CSS ビデオ チュートリアル に従って学習してください。 ！ ！

以上がCSSでマージンが機能しない理由と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。