ネストされた垂直マージンの折りたたみは CSS でどのように機能しますか?

ネストされた垂直マージンの折りたたみのニュアンスを理解する

CSS では、マージンの折りたたみの概念は要素間の間隔を決定する際に重要な役割を果たします。ウェブページ上で。垂直方向に隣接する要素のマージンが接触すると、単一のマージンに折りたたまれ、予期しない動作が発生します。ネストされた垂直マージンが折りたたまれると、この動作はさらに複雑になります。

ネストされたマージンが折りたたまれるメカニズム

2 つの要素が相互にネストされ、それらの マージンが接触する場合、次の 2 つのルールが適用されます:

1. マージンの折りたたみ: マージンは、個々のマージンの最大の高さで 1 つのマージンに折りたたまれます。
2. 寄り添う: 内側の要素はコンテナの上端に「寄り添い」、要素間のスペースを排除します。

たとえば、次の HTML と CSS を考えてみましょう。 :

<code class="html"><div id="outer">
  <div id="inner">
    A
  </div>
</div></code>

<code class="css">#outer {
  margin-top: 10px;
  background: blue;
  height: 100px;
}
#inner {
  margin-top: 20px;
  background: red;
  height: 33%;
  width: 33%;
}</code>

この場合、余白は 20px (10px と 20px の最大値) に縮小され、内側の div は外側の div の上部にぴったりとくっつきます。

ただし、コンテンツまたは境界線が 2 つのマージンを分離している場合、折りたたみは失われます。これは、以下に示すように、要素間に非改行空白または境界線を追加するときに発生する可能性があります。

<code class="html"><div id="outer">
  <div id="inner">
     
    A
  </div>
</div></code>

注: この動作は、絶対、固定、および配置された要素には適用されません。またはフローティング。

以上がネストされた垂直マージンの折りたたみは CSS でどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。