垂直マージンの相殺回避の検証サンプル

このページはCSSレイアウトにおける、隣接するボックス要素の垂直マージンの相殺回避を検証するサンプルページです。
表示確認は以下の環境で行っております。

OS

ブラウザ

ディスプレイ解像度/同時発色数

概要

以下に、borderを使って垂直マージンの相殺を回避する方法を試してみる。
（p要素にmargin、border等を指定。モードは標準準拠）

「margin-bottom:15px」と「border:1px solid #00f」を指定。
borderを含めたボックス全体の高さは50px。

「margin-top:10px」と「border:1px solid #f00」を指定。
borderを含めたボックス全体の高さは50px。

上記の例では分かりやすいように背景に5px単位でのグリッドを表示してみました。
それを目安に見てみると、明らかにマージンの相殺がなされていることが分かります。（相殺後マージン15px）

つまりこの場合は垂直マージンの相殺を回避することは失敗、ということになります。

念の為、どちらか一方にのみborderを適用させることも試してみたが、結果は同様に終わりました。
また、borderの代わりにpaddingで実験してみてもマージンは相殺され、borderとpaddingを同時に指定しても同様の結果となりました。

隣接するボックスの垂直マージンが相殺されることさえ覚えておけば、無理に相殺を回避することはないかもしれませんが、この検証ではうまく相殺を回避することはできませんでした。
何か指定の仕方が悪かったのかもしれませんが…

作成日:2006/4/21(Fri）