1. トップページ >
  2. コーディング関連情報 >
  3. コーディングコラム >
  4. marginの相殺に悩まないために独自のルールをつくる

コーディングコラム

marginの相殺に悩まないために独自のルールをつくる

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

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

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

HTML

<ul>
   <li>テキスト</li>
   <li>テキスト</li>
</ul>

CSS

li {
   margin-top:5px;
   margin-bottom:10px;
}

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

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

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

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

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