親子のイラスト

今回のテーマ

今回はmargin相殺について地味にハマるかもしれないポイントを解説します。

margin及びmargin相殺の基本概念については他のサイトで詳しく解説されていますので、
ここでは、私がハマったmargin-topの罠を例に、注意すべきポイントを共有したいと思います。

結論から言うと、
高さ(位置)が一緒だと要素が親子関係にあってもマージンの相殺が起きる。
ということです。

それでは以下の例を見てください。

See the Pen マージン相殺条件 by DYI (@DYI2022) on CodePen.

こちらのコードを単純に解説すると、
背景がグレイ
親要素が青
その中に子要素が水色
で示されています。

親と子ともに中に何も文字や画像などのコンテンツが入っていないので、同じ位置(高さ)にいる状態です。これがポイントです!

現在、
親にはmargin-top:100px
子にはmargin-top:50px

がそれぞれ記述されていますが、同じ位置にいるので値の大きい親のmargin-top:100pxのみが効いています。

この時点で私にとってはすでにもう罠でした、
親子関係にあるなら当然それぞれmarignが効くもんだと思っていたので…。親子ってそういうものでしょう!?

次に親要素にテキストを入れ、高さをずらします。

See the Pen Untitled by DYI (@DYI2022) on CodePen.

するとこのように親と子それぞれにmarginが効いています。
さきほどは相殺されていた 子のmargin-top:50pxが有効になっている状態です。

とうわけで地味な考察でしたが、意外とハマると、しっかりハマります。

たとえ親子関係にあっても中にコンテンツがなく同じ位置にいると容赦なくマージン相殺が起きる!
ということを知っておくとどこかで役立つかもしれません。ではまた(^^)/