margin: ***; padding: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

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

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


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

プロパティ名 説明
margin 数値+単位(px 等)またはパーセント マージンの大きさを指定
padding 数値+単位(px 等)またはパーセント パディングの大きさを指定

margin の値には auto(自動)を指定することもできます。


マージンとパディングの指定については、以下のページをご覧ください。

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

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

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

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

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

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

マージンとパディングを 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と同じような内容で表示されます。

デフォルト (marginpadding の指定なし)

IE Firefox Opera
[IE] [Firefox] [Opera]

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

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

margin: 0 を指定した場合

IE Firefox Opera
[IE] [Firefox] [Opera]

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

padding: 0 を指定した場合

IE Firefox Opera
[IE] [Firefox] [Opera]

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

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

IE Firefox Opera
[IE] [Firefox] [Opera]

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

margin: 0 0 0 1empadding: 0 を指定した場合

IE Firefox Opera
[IE] [Firefox] [Opera]

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

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

IE Firefox Opera
[IE] [Firefox] [Opera]

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

div {
margin-bottom: 2em;
border: 1px #808080 solid;
}

ul { padding: 0; }

ul.example1 { margin: 0 0 0 1.5em; }
ul.example2 { margin: 10px 50px; }

</style>

</head>
<body>

<div>
<ul class="example1">
<li>リスト項目A</li>
<li>リスト項目B</li>
<li>リスト項目C</li>
</ul>
</div>

<div>
<ul class="example2">
<li>リスト項目A</li>
<li>リスト項目B</li>
<li>リスト項目C</li>
</ul>
</div>

</body>
</html>

表示例
  • リスト項目A
  • リスト項目B
  • リスト項目C
  • リスト項目A
  • リスト項目B
  • リスト項目C