Web標準、W3C対応、SEO対策、スマートフォンサイト等、HTMLコーディング代行サイトです！全国どこからでもお申し込み可能。

「上下のmarginを指定したものの、思うように余白をコントロールできない」

CSSを設定する上で、こういったことは良く聞かれます。

上下の余白が思うようにいかない原因はいくつか考えられますが、「marginの相殺」が考えられます。
次の例を見てください。

HTML

CSS

上の例では、一つのリストの上下に余白が設定されています。そのリストが二つ並ぶのでリスト間の余白は15pxになるはずです。ところが実際には10pxの余白しか空きません。これは要素間の重なり合うmarginには相殺のルールがあるためです。

要素間のmarginが重なり合う場合、大きい値が有効になる

この規則を忘れずに制作するのもいいのですが、要は要素間のmarginを重ならないようにすればいいということです。例えば、一方はmarginでもう片方はpaddingで指定するといった感じです。

私の場合はもっと単純に「上の余白は指定しない」ようにしています。もちろん場合によって使い分けてはいますが、独自の制作ルールを作っておくことで、作業がスムーズに進められます。

制作を進めている中で、「どっちに設定しようか…」、とどちらでもいいことに悩むのは意外と多いものです。独自ルールを設けていれば、あれこれ悩まずに作業もはかどるというわけです。