垂直marginの折りたたみ（margin collapse） － CSS Lab

縦方向のmarginが思うように表示されないことがありませんか？主に、縦方向に接するブロック要素のmarginが指定した値より狭くなるというものです（例外あり）。「縦方向のmarginがなぜかうまくいかない」という方は、この折りたたみ機構が働いている可能性があります。あまり本には載っていないものなので参考になれば幸いです。 marginの折りたたみ（垂直マージンの折りたたみ） 【設定例】 h1{ margin-top: 10px; margin-bottom: 16px; } p { margin-top: 14px; margin-bottom: 12px; } 簡単な例として上記のように記述します。 この場合、h1とpの間はどのくらい空くでしょうか？h1のbottomは16px、pのtopは14pxですから、30pxあくと思われますが実際は16pxしか空きません。この場合