リストの余白入れ子のインデント幅 リスト項目の間隔ﾏｰｶｰと文字の間隔 定義型のインデント幅 リストcss ﾘﾌｧﾚﾝｽ へ
リスト全体の余白を調整する(CSS)
margin: ***; padding: ***;
　margin は全ての要素（table要素、caption要素以外の表関連要素を除く）に、padding は全ての要素（tr要素、thead要素、tfoot要素、tbody要素、col要素、colgroup要素を除く）に適用できます。
　margin は外側の余白を、padding は内側の余白を指定するプロパティです。このプロパティを<ul>タグ（要素）、または<ol>タグ（要素）に設定すると、リスト全体の余白を調整することができます。
　ul { margin: 0 0 0 1em; padding: 0; }   ol { margin: 0; padding-left: 1.5em; }
プロパティ名値説　　明
margin 数値＋単位（px 等）
or パーセント		 マージンの大きさを指定
padding パディングの大きさを指定
＊ 数値＋単位：値が 0 の場合は単位を省略できます。
＊ マージンとパディングの指定方法の詳細は、marginプロパティや paddingプロパティをご覧下さい。
　【ブラウザによる余白の違い】
　一般的なブラウザではリストの上下と左側に余白が設定されています。
<div style="border: 2px blue solid;"> … 青い境界線（親ボックス）
<ul style="border: 1px red solid;"> … 赤い境界線（リストボックス）
<li style="border: 1px lime solid;">リスト1</li> … 緑の境界線（リスト項目）
<li style="border: 1px lime solid;">リスト2</li>
</ul></div>
　表示領域を上のように枠で囲った場合、ブラウザにより上下と左側の余白が次のような違いが出ます。
　
　この余白は、margin と padding で左余白のみを指定することによって、取り除くことができます。
　左余白は、少なくともリストマーカー1つ分以上の大きさが必要です。（以下は1つの目安です）
  • ul要素に設定する場合 … 1em 程度（Internet Exp.の場合16pxに相当）
  • ol要素に設定する場合 … 1.5〜2em 程度（Internet Exp.の場合24〜32pxに相当）
　★ 使用例とブラウザでの表示 (e2-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .e2-1 { border:2px blue solid; }   .e2-1li { border:1px lime solid; }
.e2-1mar { margin: 0 0 0 1em; padding: 0; border:2px red solid; }
.e2-1pad { padding-left: 16px; margin: 0; border:2px red solid; }
使　用　例   ブラウザの表示
<div class=e2-1><ul class=e2-1mar>
<li class=e2-1li>マージン1</li>
<li class=e2-1li>マージン2></li></ul></div>
  • マージン1
  • マージン2
<div class=e2-1><ul class=e2-1pad>
<li class=e2-1li>パディング1</li>
<li class=e2-1li>パディング2></li></ul></div>
  • パディング1
  • パディング2
☆ この使用例は左側の余白のみを設定しています。
☆ 1em はマーカー1つ分（12pt or 16px）に相当します。
関連するページ
CSS スタイルシートﾏｰｼﾞﾝ指定(Box)：ボックスのマージン（外側の余白）を指定する
CSS スタイルシートﾊﾟﾃﾞｨﾝｸﾞ指定(Box)：ボックスのパディング（内側の余白）を指定する
リストの余白入れ子のインデント幅 リスト項目の間隔ﾏｰｶｰと文字の間隔 定義型のインデント幅 リストcss ﾘﾌｧﾚﾝｽ へ
入れ子にしたリストのインデント幅を指定する(CSS)
margin: ***; padding: ***;
　margin は全ての要素（table要素、caption要素以外の表関連要素を除く）に、padding は全ての要素（tr要素、thead要素、tfoot要素、tbody要素、col要素、colgroup要素を除く）に適用できます。
　ブラウザでは、入れ子にしたリストはインデント表示されます。このインデントの幅を調整する場合は、入れ子にされたリストに対してマージンとパディングを設定します。
　ul { margin: 0 0 0 1em; padding: 0; }   ol { margin: 0; padding-left: 1.5em; }
＊ リストの余白指定の詳細は、「リスト全体の余白を調整する」をご覧下さい。
　★ 使用例とブラウザでの表示 (e2-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .e2-2pad { padding-left: 1em; margin: 0; }
使　用　例   ブラウザの表示
<ul><li>リスト(標準)A</li>
<ul><li>リスト(標準)A-1</li>
<li>リスト(標準)A-2</li></ul>
<li>リスト(標準)B></li></ul>
  • リスト(標準)A
    • リスト(標準)A-1
    • リスト(標準)A-2
  • リスト(標準)B>
<ul><li>インデント1</li>
<ul class=e2-2pad><li>インデント1-a</li>
<li>インデント1-b</li></ul>
<li>インデント2></li></ul>
  • インデント1
    • インデント1-a
    • インデント1-b
  • インデント2
☆ 1em はマーカー1つ分（12pt or 16px）に相当します。
関連するページ
CSS スタイルシートﾏｰｼﾞﾝ指定(Box)：ボックスのマージン（外側の余白）を指定する
CSS スタイルシートﾊﾟﾃﾞｨﾝｸﾞ指定(Box)：ボックスのパディング（内側の余白）を指定する
リストの余白入れ子のインデント幅 リスト項目の間隔ﾏｰｶｰと文字の間隔 定義型のインデント幅 リストcss ﾘﾌｧﾚﾝｽ へ
リスト項目の間隔を指定する(CSS)
margin-bottom: *px;
　margin-bottom は、全てのタグ（要素）に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。
　margin-bottom は、下のマージンを指定するプロパティです。このプロパティを<li>タグ（要素）に設定すると、リスト項目の上下間隔を指定できます。
　li { margin-bottom: 5px; }
プロパティ名値説　　明
margin-bottom 数値＋単位（px 等） or パーセント 下のマージンを指定（初期値は 0）
＊ マーカーを背景画像で表示している場合は、margin-bottom ではなく padding-bottom を使用して下さい（マーカーが欠けるのを避けるため）。
　★ 使用例とブラウザでの表示 (e2-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： ul.e2-3mar li { margin-bottom: 8px; }
使　用　例   ブラウザの表示
<ul>
<li>リスト(標準)A</li>
<li>リスト(標準)B</li>
<li>リスト(標準)C</li>
</ul>
  • リスト(標準)A
  • リスト(標準)B
  • リスト(標準)C
<ul class=e2-3mar>
<li>下マージン1</li>
<li>下マージン2</li>
<li>下マージン3</li>
</ul>
  • 下マージン1
  • 下マージン2
  • 下マージン3
☆ ul.e2-3mar li は、e2-3mar を指定した<ul>タグの子プロセスの<li>タグに適用させる記述方法です。
☆ 単に .e2-3mar とした場合は、リスト項目の全てに <li class=e2-3mar> と記述することになります。
関連するページ
CSS スタイルシート上下左右のマージン：上下左右のマージンを個別に指定する
CSS スタイルシート上下左右のパディング：上下左右のパディングを個別に指定する
リストの余白入れ子のインデント幅 リスト項目の間隔ﾏｰｶｰと文字の間隔 定義型のインデント幅 リストcss ﾘﾌｧﾚﾝｽ へ
マーカーとテキストの間隔を指定する(CSS)
padding-left: *px;
　padding-left は、全てのタグ（要素）に適用できます。ただし、tr要素、thead要素、tfoot要素、tbody要素、col要素、colgroup要素には適用できません。
　padding-left は、左のパディングを指定するプロパティです。このプロパティを<li>タグ（要素）に設定すると、リストマーカーとテキストとの間隔を指定できます。
　li { padding-left: 20px; }
プロパティ名値説　　明
padding-left 数値＋単位（px 等） or パーセント 左のパディングを指定（初期値は 0）
　★ 使用例とブラウザでの表示 (e2-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： ul.e2-4pad li { padding-left: 10px; }
使　用　例   ブラウザの表示
<ul>
<li>リスト(標準)A</li>
<li>リスト(標準)B</li>
<li>リスト(標準)C</li>
</ul>
  • リスト(標準)A
  • リスト(標準)B
  • リスト(標準)C
<ul class=e2-4pad>
<li>左パディング1</li>
<li>左パディング2</li>
<li>左パディング3</li>
</ul>
  • 左パディング1
  • 左パディング2
  • 左パディング3
☆ ul.e2-4pad li は、e2-4pad を指定した<ul>タグの子プロセスの<li>タグに適用させる記述方法です。
☆ 単に .e2-4pad とした場合は、リスト項目の全てに <li class=e2-4pad> と記述することになります。
関連するページ
CSS スタイルシート上下左右のパディング：上下左右のパディングを個別に指定する
リストの余白入れ子のインデント幅 リスト項目の間隔ﾏｰｶｰと文字の間隔 定義型のインデント幅 リストcss ﾘﾌｧﾚﾝｽ へ
定義型リストのインデント幅を指定する(CSS)
margin-left: *em;
　margin-left は、全てのタグ（要素）に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。
　margin-left は、左のマージンを指定するプロパティです。このプロパティを<dd>タグ（要素）に設定すると、定義型リスト（説明部分）のインデント幅を指定できます。
　dd { margin-left: 1em; }
プロパティ名値説　　明
margin-left 数値＋単位（px 等） or パーセント 左のマージンを指定（初期値は 0）
　★ 使用例とブラウザでの表示 (e2-5)スタイルシートの書き方（基本）は、こちら です。
設定例 ： dl.e2-5mar dd { margin-left: 1em; }
使　用　例   ブラウザの表示
<dl>
<dt>用語(標準)1</dt>
<dd>用語の説明文1</dd>
<dt>用語(標準)2</dt>
<dd>用語の説明文2</dd>
</dl>
用語(標準)1
用語の説明文1
用語(標準)2
用語の説明文2
<dl class=e2-5mar>
<dt>用語(ｲﾝﾃﾞﾝﾄ)A</dt>
<dd>用語の説明文A</dd>
<dt>用語(ｲﾝﾃﾞﾝﾄ)B</dt>
<dd>用語の説明文B</dd>
</dl>
用語(ｲﾝﾃﾞﾝﾄ)A
用語の説明文A
用語(ｲﾝﾃﾞﾝﾄ)B
用語の説明文B
☆ 1em は、全角文字１文字分（12pt or 16px）に相当します。
☆ dl.e2-5mar dd は、e2-5mar を指定した<dl>タグの子プロセスの<dd>タグに適用させる記述方法です。
☆ 単に .e2-5mar とした場合は、説明部分の全てに <dd class=e2-5mar> と記述することになります。
関連するページ
CSS スタイルシート上下左右のマージン：上下左右のマージンを個別に指定する
HTML タグページ 定義型リスト：定義型リストを作る
リストの余白入れ子のインデント幅 リスト項目の間隔ﾏｰｶｰと文字の間隔 定義型のインデント幅 リストcss ﾘﾌｧﾚﾝｽ へ