Web標準HTMLコーディングのHomeWeb-coding|marginの相殺に悩まないために独自のルールをつくるWeb標準、W3C対応、SEO対策、スマートフォンサイト等、HTMLコーディング代行サイトです!全国どこからでもお申し込み可能。>marginの相殺に悩まないために独自のルールをつくるコーディングコラムmarginの相殺に悩まないために独自のルールをつくる「上下のmarginを指定したものの、思うように余白をコントロールできない」CSSを設定する上で、こういったことは良く聞かれます。上下の余白が思うようにいかない原因はいくつか考えられますが、「marginの相殺」が考えられます。次の例を見てください。{margin-top:5px;margin-bottom:10px;}上の例では、一つのリストの上下に余白が設定されています。そのリストが二つ並ぶのでリスト間の余白は15pxになるはずです。ところが実際には10pxの余白しか空きません。これは要素間の重なり合うmarginには相殺のルールがあるためです。要素間のmarginが重なり合う場合、大きい値が有効になるこの規則を忘れずに制作するのもいいのですが、要は要素間のmarginを重ならないようにすればいいということです。一方はmarginでもう片方はpaddingで指定するといった感じです。私の場合はもっと単純に「上の余白は指定しない」ようにしています。場合によって使い分けてはいますが、独自の制作ルールを作っておくことで、作業がスムーズに進められます。制作を進めている中で、「どっちに設定しようか...」、とどちらでもいいことに悩むのは意外と多いものです。独自ルールを設けていれば、あれこれ悩まずに作業もはかどるというわけです。