実録！ホームページ制作者の声

余白が思うようにいかない原因はいくつか考えられます。まずは上下の余白についてです。ここでのポイントは上下marginの相殺です。
次の例を見てください。

HTMLサンプル =========================================
<ul>
   <li>テキスト</li>
   <li>テキスト</li>
</ul>


CSSサンプル =========================================
li {
   margin-top:5px;
   margin-bottom:10px;
}

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

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

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

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

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

会社内で制作されている方には「これがオレ流」なんて言ってられないかもしれませんが、より質の高いコーディングができるよう、自分に合った制作のルールを決めていくことは必要かもしれません。