9-1 マージンの設定

マージンとは要素の余白を設定する項目です。この場合の「要素」とは、body部であったり、段落を表すpでも見出しに使用するh1でもほぼ何にでも設定出来ます(一番よく利用されるのはtableの中身かも知れません)。いわゆる 『boderの外側』 の余白を設定する事が出来ます。


マージンとパディングの説明図

9-1-1 書き方

書き方は一括で全て設定する事も出来ますし、個別に分けて設定する事も出来ます。

margin: 1px; /* 一括で指定する場合 */
margin: 1px 2px; /* 上下=1px、左右=2px */
margin: 1px 2px 3px; /* 上=1px、左右=2px、下=3px */
margin: 1px 2px 3px 4px; /* 上=1px、右=2px、下=3px、左=4px */

余白の設定は12時の方向から時計回り(上右下左の順番)で指定出来ます。

margin-top: 10px; /* 上=10px */
margin-bottom: 10px; /* 下=10px */
margin-left: 10px; /* 左=10px */
margin-right: 10px; /* 右=10px */

こちらの書き方をしてもOKです。


【 具体例 】

<style type="text/css">
<!--
h1 {
margin: 5px 10px 15px 20px; /* マージンの間隔 */
} -->
</style>

必ず <head> ~ </head> 内に記述して下さい。
上記の見本では、見出しである「h1」にマージンが設定されております。それぞれ上に5px空白が作られ、右側に10px、下に15px、左側に20px余白が出来ますという意味になります。

[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]