Webデザインの大前提:marginとpaddingについて解説

目次のデザインを細かく解説する前に、CSSにおけるmarginとpaddingについて理解しておくことが大切。

これら二つは余白を調節する上で必要なものになります。

marginとpaddingの違い

はてなの目次スタイルは基本的に

.table-of-contents ul {
    margin:〇〇px;
    padding:〇〇px;
}

と書くと、目次のmarginとpaddingを変更できます。

赤線が目次の枠になります。
画像を見てもらえると分かる通り、

1. marginは目次と画面との余白
2. paddingは目次内のテキストの余白

ということが分かりますね。

余白の大きさを上下左右ピンポイントで指定可能

margin-left:〇〇px;

などのように指定すれば、上下左右のある一部だけ幅を増やすこともできます。

★margin-leftとmargin-bottomを大きくした場合

★padding-leftとpadding-topを大きくした場合

デザインの微調整に使えるので覚えておくと便利です。