マージン：外側の余白上下左右のマージン パディング：内側の余白 上下左右のパディング ボックスcss ﾘﾌｧﾚﾝｽ へ
ボックスのマージン（外側の余白）を指定する(CSS)
margin: *px *px *px *px;
　このプロパティは、全てのタグ（要素）に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。
　margin は、上下左右のマージン（外側の余白）をまとめて指定するプロパティです。
　div { margin: 5px 10px 15px 20px; }
プロパティ名値説　　明
margin 数値＋単位（px 等） or パーセント マージンの大きさを指定
　値には auto（自動）を指定することもできます。
　【指定方法】
　次の４タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。
① margin: 2px; … 「上下左右」をまとめて指定
② margin: 2px 3px; … 「上下」と「左右」を指定
③ margin: 2px 3px 4px; … 「上」､「左右」､「下」を指定
④ margin: 2px 3px 4px 5px; … 「上」､「右」､「下」､「左」を指定（時計回り）
　【マージンとパディング】
ボックスのイメージ
・マージン … 境界線（青緑の枠）より外側にある余白部分
・パディング … 境界線（青緑の枠）と内容領域の間にある余白部分

ブロックボックスが上下に並ぶ場合は、隣接する垂直方向のマージンが相殺される場合があります。
　★ 使用例とブラウザでの表示 (b2-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b2-1pad { padding: 10px; backGround-color: lightsalmon; }
.b2-1mar1 { margin: 10px; backGround-color: pink; }
.b2-1mar2 { margin: 20px 40px; backGround-color: pink; }
.b2-1mar3 { margin: 20px 10px 20px 60px; backGround-color: pink; }
使　用　例   ブラウザの表示
<div class=b2-1pad>上下左右に10pxの
　パディング：表示領域の外側に余白を設
　定します。</div>
上下左右に10pxのパディング：表示領域の内側に余白を設定します。
<div class=b2-1mar1>上下左右に10pxの
　マージン：表示領域の内側に余白を設定
　します。</div>
上下左右に10pxのマージン：表示領域の外側に余白を設定します。
<div class=b2-1mar2>上下に20px、
　左右に40pxのマージンです。</div>
上下に20px、左右に40pxのマージンです。
<div class=b2-1mar3>上 20px、右に10px、
　下 20px、左に60pxのマージンです。</div>
上 20px、右に10px、下 20px、左に60pxのマージンです。

※      で囲まれた部分が全体の表示領域に当たります。
※ 上下左右のマージンを４点で指定する場合は、時計回りで記述します。
※ マージンとパディングの「文字を表示する位置」（テキストの相対的な表示位置）は同じですが、「余白の取り方」が違います。文字などに「背景色」をつける場合はマージンとパディングを使い分けて下さい。
マージン：外側の余白上下左右のマージン パディング：内側の余白 上下左右のパディング ボックスcss ﾘﾌｧﾚﾝｽ へ
上下左右のマージンを個別に指定する(CSS)
margin-top: *px;
　このプロパティは、全てのタグ（要素）に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。
　margin-top は、上下左右のマージンを個別に指定するプロパティです（top の部分には、right、bottom、left が入ります）。
　div { margin-top: 8px; margin-right: 4px; margin-bottom: 8px; margin-left: 4px; }
プロパティ名値説　　明メ　モ
margin-top 数値＋単位（px 等）
or パーセント		 上のマージンを指定 上下左右の指定順は任意です。
マージンをまとめて指定する場合は､時計回りで指定するので、その順番にしています。
margin-right右のマージンを指定
margin-bottom下のマージンを指定
margin-left左のマージンを指定
　初期値は 0 です。また、値には auto（自動）を指定できます。
　★ 使用例とブラウザでの表示 (b2-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b2-2pad { padding-top: 25px; padding-bottom: 25px; }
.b2-2mar1 { margin-left: 15px; margin-right: 15px; padding: 0;
color: black; backGround-color: pink; }
.b2-2mar2 { margin-left: 15px; margin-right: 15px; padding: 0;
color: blue; backGround-color: mistyrose; }
使　用　例   ブラウザの表示
<DIV class=b2-2pad><div class=b2-2mar1>
①ここは b2-2mar1 を使用しています。
<div class=b2-2mar2>
②ここは b2-2mar2 を使用しています。
　<br>薄いバラ色です。</div>
①の続きで、ここもピンク色です。
</div></DIV>
①ここは b2-2mar1 を使用しています。
②ここは b2-2mar2 を使用しています。
薄いバラ色です。
①の続きで、ここもピンク色です。
※      の部分が全体の表示領域で .b2-2pad { } が働いている箇所です。
※ ①が .b2-2mar1 { } の働いている部分で、青枠の線とピンク色の部分との隙間が15ピクセルになります。
※ ②が .b2-2mar2 { } の働いている部分で、ピンク色と薄いバラ色との隙間が15ピクセルになります。
※ なお、padding-top（bottom）は、全体の表示領域とピンク色の部分とに「余白」を設定する機能です。
マージン：外側の余白上下左右のマージン パディング：内側の余白上下左右のパディング ボックスcss ﾘﾌｧﾚﾝｽ へ
ボックスのパディング（内側の余白）を指定する(CSS)
padding: *px *px *px *px;
　このプロパティは、全てのタグ（要素）に適用できます。ただし、tr要素、thead要素、tfoot要素、tbody要素、col要素、colgroup要素には適用できません。
　padding は、上下左右のパディング（内側の余白）をまとめて指定するプロパティです。
　div { padding: 5px 10px 15px 20px; }
プロパティ名値説　　明
padding 数値＋単位（px 等） or パーセント パディングの大きさを指定
　【指定方法】
　次の４タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。
① padding: 2px; … 「上下左右」をまとめて指定
② padding: 2px 3px; … 「上下」と「左右」を指定
③ padding: 2px 3px 4px; … 「上」､「左右」､「下」を指定
④ padding: 2px 3px 4px 5px; … 「上」､「右」､「下」､「左」を指定（時計回り）
　【パディングとマージン】
ボックスのイメージ
・パディング … 境界線（青緑の枠）と内容領域の間にある余白部分

・マージン … 境界線（青緑の枠）より外側にある余白部分
　★ 使用例とブラウザでの表示 (b2-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b2-3mar { margin: 10px; backGround-color: lightsalmon; }
.b2-3pad1 { padding: 10px; backGround-color: lightpink; }
.b2-3pad2 { padding: 10px 30px; backGround-color: palegreen; }
.b2-3pad3 { padding: 10px 15px 10px 50px; backGround-color: moccasin; }
使　用　例   ブラウザの表示
<div class=b2-3mar>上下左右に10pxの
　マージン：表示領域の外側に余白を設定
　します。</div>

<div class=b2-3pad1>上下左右に10pxの
　パディング：表示領域の内側に余白を設
　定します。</div>

<div class=b2-3pad2>上下に10px、
　左右に30pxのパディングです。</div>

<div class=b2-3pad3>上 10px、右に15px、
　下 10px、左に50pxのパディングです。</div>

上下左右に10pxのマージン：表示領域の外側に余白を設定します。
上下左右に10pxのパディング：表示領域の内側に余白を設定します。
上下に10px、左右に30pxのパディングです。
上 10px、右に15px、下 10px、左に50pxのパディングです。

※      で囲まれた部分が、マージン設定箇所の「表示領域」になります。
※ 上下左右のパディングを４点で指定する場合は、時計回りで記述します。
※ マージンとパディングの「文字を表示する位置」（テキストの相対的な表示位置）は同じですが、「余白の取り方」が違います。文字などに「背景色」をつける場合はマージンとパディングを使い分けて下さい。
マージン：外側の余白上下左右のマージン パディング：内側の余白上下左右のパディング ボックスcss ﾘﾌｧﾚﾝｽ へ
上下左右のパディングを個別に指定する(CSS)
padding-top: *px;
　このプロパティは、全てのタグ（要素）に適用できます。ただし、tr要素、thead要素、tfoot要素、tbody要素、col要素、colgroup要素には適用できません。
　padding-top は、上下左右のパディングを個別に指定するプロパティです（top の部分には、right、bottom、left が入ります）。
　div { padding-top: 6px; padding-right: 4px; padding-bottom: 6px; padding-left: 4px; }
プロパティ名値説　　明メ　モ
padding-top 数値＋単位（px 等）
or パーセント		 上のパディングを指定 上下左右の指定順は任意です。
パディングをまとめて指定する場合は､時計回りで指定するので、その順番にしています。
padding-right 右のパディングを指定
padding-bottom 下のパディングを指定
padding-left 左のパディングを指定
　初期値は 0 です。
　★ 使用例とブラウザでの表示 (b2-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b2-4pad { padding-top: 25px; padding-bottom: 25px;
backGround-color: lightgreen; }
.b2-4pad1 { padding-left: 20px; padding-right: 20px; color: black;
backGround-color: lightpink; }
.b2-4pad2 { padding-left: 15px; padding-right: 15px; color: blue;
backGround-color: mistyrose; }
使　用　例   ブラウザの表示
<DIV class=b2-4pad><div class=b2-4pad1>
①ここは b2-4pad1 を使用しています。
　背景色はピンク色です。
<div class=b2-4pad2>
②ここは b2-4pad2 を使用しています｡
　背景色は淡いバラ色です。</div>
①の続きで、ここもピンク色です。
</div></DIV>
①ここは b2-4pad1 を使用しています。背景色はピンク色です。
②ここは b2-4pad2 を使用しています。背景色は淡いバラ色です。
①の続きで、ここもピンク色です。
※      の部分が全体の表示領域で .b2-4pad { } が働いている箇所です。
※ ①が .b2-4pad1 { } の働いている部分で、ピンク色の背景色部と文字との隙間が20ピクセルになります。
※ ②が .b2-4pad2 { } の働いている部分で、淡いバラ色の背景色部と文字との隙間が15ピクセルになります。
マージン：外側の余白 上下左右のマージン パディング：内側の余白 上下左右のパディング ボックスcss ﾘﾌｧﾚﾝｽ へ