HTML5とCSS3でレイアウトを組み上げているとき、「マージンの相殺」の罠にはまりました。
display:blockを設定したsectionのボックスを入れ子にしたとき、内側のmargin-topの設定が反映されない現象です。
解決方法はこちらです。
結論を言うと、外側にpadding-top、内側にmargin-topを挟むことで解決できます。
「マージンの相殺」なんて名称がついていますが、ただのブラウザのバグですな。
ファミコンゲームのバグを裏技と信じていた純粋な子供時代を思い出しました。
この記事がお役にたちましたらシェアをお願いします
0 件のコメント:
コメントを投稿