つい最近のことなのだが、本屋で雑誌を立ち読みしていてある言葉に目が留まった。
「マージンの相殺」
え……？という感じである。
Web標準のコーディングを約1年やってきたけど、そんなルール初めて聞いた。
これって常識？ですか、やっぱり。
要は隣接するボックスの上下マージンが、単純にプラスされず、相殺されて大きいマージンの方が適用されるというルールなんだけど、よくよく思い出してみると、確かに……そんな現象が。
ずっと謎だったんだけど、CSSの仕様だったのね。
確かに、そういう仕様の方が都合がいいといえばその通りですね。
今まで、経験的に上下マージンをつけたボックスを重ねると計算が合わなくなるので、基本的に下マージンを優先的に使うようにしてたけど、ルールさえわかれば応用が利きそうです。
このルールは上下に重ねたボックスのみではなく、内包するボックスに対しても適用されます。
あと、マイナスマージンが設定されている場合も当然計算方法があり、正のマージンと負のマージンが隣り合っている場合は「両方を足し合わせた値」になり、負のマージン同士が隣り合っている場合は「小さい値」が採用されます。
さらに、パディングやボーダーが設定されている場合にも少しルールが変わります。
これについては水無月ばけらさんの日記に詳しく書いてありました。
へぇ……そうなんだって感じですが、この記事2003年に書かれたものなんですよね。
僕は1年前にこの世界に入ったわけなので、2003年のことなんか知らないわけですが、なんかここってそういうとこなんだなとあらためて思わされました。
それはともかく、これでマージンがおかしくなるからといって根拠もなくパディングに書き換えてみるとかいうことも減るような気がします。
論理的なルールがわかったので。
経験に理論的な裏づけを加えるって大事なことですね。
IEの余白問題でもう少し情報を。
「マイコミジャーナル」の記事で役に立ちそうなのを見つけました。
「【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7」
余白関連の記事はこちら。
IE6との比較で書かれているので、IE6で問題が起こったときの参考にもなりそうです。
