リスト全体の余白を調整する

margin はマージン（外側の余白）を、padding はパディング（内側の余白）を指定するプロパティです。

このプロパティをul要素、またはol要素に対して設定すると、リスト全体の余白を調整することができます。

デフォルトの余白を取り除く方法

一般的なブラウザでは、リストの周囲に適度な余白が設定されています。

この余白を取り除きたい場合は、ul要素（またはol要素）に対して次のスタイルを設定します。

ul {
margin: 0 0 0 1em;
padding: 0;
}

左マージンは、少なくともリストマーカー1つ分以上の大きさが必要です。（以下は1つの目安です）

• ul要素に設定する場合 … 1em 程度
• ol要素に設定する場合 … 1.5em ～ 2em 程度

マージンとパディングを 0 にして、左マージンにだけ上記の値を設定する、といった感じになります。

余白の比較

ul要素にマージンやパディングを設定した場合の、ブラウザごとの表示の違いを比較してみました。

ベースのコードは次の内容になります。

<div style="border: 2px red solid;"> 

<ul style="border: 1px blue solid;">
<li style="border: 1px lightgreen solid;">リスト</li>
<li style="border: 1px lightgreen solid;">リスト</li>
<li style="border: 1px lightgreen solid;">リスト</li>
</ul>

</div>

違いを分かりやすくするため、各要素の境界線を次の色で表示させています。

• div要素 … 赤い境界線（親ボックス）
• ul要素 … 青い境界線（リストボックス）
• li要素 … 緑の境界線（リスト項目）

以下は、表示モードが互換モードの場合の表示例です。（ブラウザのバージョンにより、表示内容は多少異なるかもしれません）

• IE 8では、互換モードの場合は以下のIEのように表示され、標準モードの場合はFirefoxと同じような内容で表示されます。

デフォルト （margin や padding の指定なし）

IE	Firefox	Opera

IEとFirefoxでは、リストマーカーの位置が大きく異なります。IEでは青い境界線（ul要素）の外側に配置されますが、Firefoxでは内側に配置されることになります。（OperaではFirefoxに近い結果となります）

リストの左側の余白についても、IEではマージンが設定されているのに対し、Firefoxではパディングが設定されています。

margin: 0 を指定した場合

IE	Firefox	Opera

IEの場合、青い境界線の外側にリストマーカーがあるので、マージンを0にするとマーカーが親ボックスからはみ出てしまいます。FirefoxとOperaの場合は、左側にパディングが入っているためリスト全体が左に寄りません。

padding: 0 を指定した場合

IE	Firefox	Opera

IEの場合、元々パディングがないためにデフォルトとの違いはありません。FirefoxとOperaの場合は、青い境界線（ul要素）と緑の境界線（li要素）がくっつく形になるので、リストマーカーが親ボックスからはみ出てしまいます。

margin: 0 と padding: 0 を指定した場合

IE	Firefox	Opera

マージンとパディングを0にすると、どのブラウザも同じような表示結果になります。しかし、リストマーカーが親ボックスからはみ出てしまいます。

margin: 0 0 0 1em と padding: 0 を指定した場合

IE	Firefox	Opera

左側にリストマーカー1つ分のマージンを入れると、マーカーが親ボックスからはみ出さなくなります。

青い境界線（ul要素）と緑の境界線（li要素）を消してみると、次のように表示されます。

IE	Firefox	Opera