コンテンツの余白を設定

関連リンク

• cssの説明
• cssの記載方法
• cssの読み込む順番
• コンテンツ余白設定

Pickup

• 無料アフィリエイト
• 無料ブログ 比較 宣伝

margin padding

コンテンツの余白を設定するときは、margin paddingを使用します。

margin paddingのCSS（スタイルシート）記載は2種類、8通りの方法が設定できます。記載数で指定場所が変わります。

1. margin:1em; ⇒ 上 右 下 左 （1em）
2. margin:1em 0.5em; ⇒ 上下（1em）右左（0.5em）
3. margin:1em 0.5em 1.5em; ⇒ 上（1em）右左（0.5em）下（1.5em）
4. margin:1em 0.5em 1.5em 0.7em; ⇒ 上 右 下 左

個別に指定

1. margin-top:1em; ⇒ 上（1em）
2. margin-right:1em; ⇒ 右（1em）
3. margin-bottom:1em; ⇒ 下（1em）
4. margin-left:1em; ⇒ 左（1em）

※ paddingも同じ使い方です。違いは以下を参考にしてください。

 図1)                       ┏━━━━━━━┓
                            ┃              ┃
 ┏━━━━━━━┓         ┃              ┃
 ┃              ┃         ┃              ┃
 ┃  コンテンツ  ┃         ┃  コンテンツ  ┃
 ┃              ┃                         ┃
 ┃              ┃        padding-top:1em  ┃
 ┃              ┃                         ┃
 ┗━━━━━━━┛         ┗━━━━━━━┛


 図2)
 ┏━━━━━━━┓　　   　┏━━━━━━━┓
 ┃              ┃         ┃              ┃
 ┃  コンテンツ  ┃         ┃  コンテンツ  ┃
 ┃              ┃         ┃              ┃
 ┃              ┃         ┃              ┃
 ┃              ┃         ┃              ┃
 ┗━━━━━━━┛　　   　┗━━━━━━━┛

 ┏━━━━━━━┓　　      　 ┏━━━━━━━┓
 ┃              ┃             ┃              ┃
 ┃  コンテンツ  ┃             ┃  コンテンツ  ┃
 ┃                             ┃              ┃
 ┃       margin-right:1em      ┃              ┃
 ┃                             ┃              ┃
 ┗━━━━━━━┛　　       　┗━━━━━━━┛

• padding ⇒ コンテンツの余白の値（中）を調節します。
• margin ⇒ コンテンツの余白の値（外）を調節します。

テーブルで見ると

テーブルの余白で見ると以下のようになります。

セル1	セル2
セル3	セル4

<table border="1" cellspacing="1" cellpadding="5" width="500">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>

• cellspacing = margin
• cellpadding = padding

cellspacingを10に設定

セル1	セル2
セル3	セル4

<table border="1" cellspacing="10" cellpadding="1" width="500">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>

cellpaddingを10に設定

セル1	セル2
セル3	セル4

<table border="1" cellspacing="1" cellpadding="10" width="500">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>