[新着] Webテンプレートを仮オープンしました
margin はマージン（外側の余白）を、padding はパディング（内側の余白）を指定するプロパティです。
ul {
margin: 0 0 0 20px;
padding: 0;
}
| margin | マージンの大きさを指定します |
|---|---|
| padding | パディングの大きさを指定します |
マージンとパディングの大きさは、数値+単位（px、他）か %（割合）、auto（自動）で指定します。
マージンとパディングの指定については、下記のページをご覧ください。
【ブラウザによる違い】
ul 要素（または ol 要素）にマージンやパディングを指定すると、リストマーク（マーカー）がはみ出てしまったり、ブラウザによって表示位置が異なってしまう場合があります。
この問題は、マージンとパディングを次のように指定することで回避できます。
ul {
margin: 0 0 0 1em;
padding: 0;
}
パディングを0にした上で、左のマージンを指定します。
※左マージンは、少なくともリストマーク1つ分以上の大きさが必要です。
【参考：余白の比較】
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 要素 … 緑の枠線（リストの項目）
※表示モードは「互換モード」で確認しています。（Operaの場合、「標準モード」にすると下側のマージンの解釈がIEと同様になるようです。）
※Netscapeの表示例は、Firefoxの表示と変わらないため省かせていただきました。
■デフォルト（margin や padding の指定なし）
| IE 6 | Firefox 1 | Opera 8 |
|---|---|---|
 |
 |
 |
IEとFirefoxで大きく異なる点は、リストマークが青い枠線（ul要素）の内側にあるか、外側にあるか、です。リスト左側の扱いは、IEではマージンが入り、Firefoxではパディングが入ります。
■margin: 0 を指定した場合
| IE 6 | Firefox 1 | Opera 8 |
|---|---|---|
 |
 |
 |
IEの場合、青い枠線の外側にリストマークがあるので、マージンを0にするとリストマークがはみ出てしまいます。Firefoxの場合は、左側にパディングが入るためリスト全体が左に寄りません。
■padding: 0 を指定した場合
| IE 6 | Firefox 1 | Opera 8 |
|---|---|---|
 |
 |
 |
IEの場合、元々パディングがないためデフォルトと変化はありません。Firefoxの場合は、青い枠線（ul要素）と緑の枠線（li要素）がくっつく形になるので、結果的にリストマークがはみ出てしまいます。
■margin: 0 と padding: 0 を指定した場合
| IE 6 | Firefox 1 | Opera 8 |
|---|---|---|
 |
 |
 |
マージンとパディングを0にすると、IEとFirefoxの表示がだいたい同じになります。しかし、どちらもリストマークがはみ出てしまいます。
■margin: 0 0 0 1em と padding: 0 を指定した場合
| IE 6 | Firefox 1 | Opera 8 |
|---|---|---|
 |
 |
 |
左側にリストマーク分のマージンを入れると、リストマークははみ出しません。IE、Firefox、Opera、どのブラウザも同じように表示されます。
青い枠線（ul要素）と緑の枠線（li要素）を消してみると、次のように表示されます。
| IE 6 | Firefox 1 | Opera 8 |
|---|---|---|
 |
 |
 |
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
div {
margin-bottom: 20px;
border: 1px #808080 solid;
}
ul { padding: 0; }
#example1 { margin: 0 0 0 1.5em; }
#example2 { margin: 10px 0 10px 50px; }
-->
</style>
</head>
<body>
<div>
<ul id="example1">
<li>WebデザイナーA</li>
<li>WebデザイナーB</li>
<li>WebデザイナーC</li>
</ul>
</div>
<div>
<ul id="example2">
<li>WebプログラマーA</li>
<li>WebプログラマーB</li>
<li>WebプログラマーC</li>
</ul>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
