マージンが相殺されないケースについて 

前回の「マージンの相殺とhtmlについて」に続き、
マージンが相殺されないケースについて
をお話します。

マージンの相殺は、あくまで通常の流れでの話となります。
floatやpositionなどで通常の流れから離れたものに関しては、
相殺がおきません。※これはまた後日触れます。

今回は通常の流れの中でマージンの相殺を抑制してしまう場合を見てみます。

親要素にpaddingを設定した場合
親要素に、子要素のマージンの方向と同じ方向にpaddingを設定した場合は、
マージンの相殺を抑制します。まずははじめに前回練習したマージンの相殺のケースから見てみましょう。

<div class="aoya">
<p class="akodomo">マージンの相殺</p>
</div>

<div class="boya">
<p class="bkodomo">h2のmarginやpaddingを試す</p>
</div>
div.aoya{
width:200px;
background-color:#CCFF66;
}

p.akodomo{
background-color:#99CC00;
margin-bottom:200px;
}

div.boya{
width:200px;
background-color:#FF6699;
}

p.bkodomo{
background-color:#FF00CC;
margin-top:100px; ←相殺されました
}

この場合の表示結果は以下のように、aoyaとboyaの間に200pxの余白が入ります。

マージンの相殺が起こらない場合1

上下関係隣り合う同士の中でだけのマージンは相殺は起こりますが、
この場合親子関係のboyaにはマージンが設定されておらず、
bkodomoに設定されており、
そのマージンがboyaを突き抜けるような形で、
akodomoの下方向へのマージンとあいまって相殺しています。

ここまでが前回のハイライトですね。
それではここで、div.aoyaにpadding-bottom;10px;を設定します。

<div class="aoya">
<p class="akodomo">マージンの相殺</p>
</div>

<div class="boya">
<p class="bkodomo">抑制するには</p>
</div>
div.aoya{
width:200px;
background-color:#CCFF66;
padding-bottom:10px;
}

p.akodomo{
background-color:#99CC00;
margin-bottom:200px;
}

div.boya{
width:200px;
background-color:#FF6699;
margin-top:100px;
}

p.bkodomo{
background-color:#FF00CC;
}

すると、p.akodomoのbottomはdiv.aoyaの中に納まり、div.boyaのmargin-top;100px;も生きてくるのです。

マージンの相殺が起こらない場合2

隣合う家のようなものと考えて見てください。
隣のA家さんとB家さんの子供同士、A子とB子がお互いに距離をとりたいと言って離れています。
そこで親がA子さんの部屋を作ります。
A子さんの部屋は親が決めたpaddinの中にあります。
ここでどれだけA子さんが距離の話をしても、家の中だけにとどまり、
家の外には影響されなくなったのです。
もちろんB家さんも親がB子さんの部屋をpaddingを使って作ってしまえば、
B子さんがいくらmarginを主張しても、それはB家の中だけの話になってしまいます。
A家さんとB家さんの距離を決めるのは、親のmarginだけとなったのです。

さらにpadding以外にもマージンの相殺を抑制する要素があります。

間にborderを設定してもマージンの相殺は起こらない
間に線(border)を設定することでもマージンの相殺を抑制することができます。

<div class="coya">
<p class="ckodomo">マージンの相殺</p>
</div>

<div class="doya">
<p class="dkodomo">ボーダーでも</p>
</div>
div.coya{
width:500px;
background-color:#0066FF;
border:solid 1px #000000;
}

p.ckodomo{
background-color:#0033FF;
margin-bottom:100px;
}

div.doya{
width:500px;
background-color:#FFFF99;
margin-top:100px;
}

p.dkodomo{
background-color:#FF9966;
}

マージンの相殺が起こらない場合3

この場合は、家に外壁を建てたよなイメージを持ってください。
※実際にはaoyaとboyaの背景色は見えません。今は分かりやすくするために上下に余白があるように表示しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>