frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

iframeはmarginの相殺が起こらない

スポンサードリンク


スポンサードリンク


CSSにおけるマージンの相殺は深いですよね。

マージンの相殺とは、簡単に言うと要素が連続する場合にマージンのサイズが大きい方が優先されるということです。

例えばh2がmargin-bottom:30pxで続く要素がmargin-top:20pxであればその要素間は30pxになります。
しかしこのマージンの相殺は特定条件で起きなくなります。

次の場合もマージンの相殺が起こらない1例です。

iframeのmargin-topが相殺されない

See the Pen Yxwdgo by funclur (@funclur) on CodePen.

通常.boxのようにmargin-bottom:30pxが優先され30pxの空きのはずですが、iframeの場合30pxとiframeのmargin-top:20pxが足され50pxの空きが出来てしまっています。

この場合の改善策として「h2 + iframe」などのような隣接セレクタにmargin-top:0としてh2のマージンのみを生かす方法が考えられます。