マージンを使う

マージンと言うのはイメージとしては↓みたいな感じです。
マージン説明

パッディングは要素の中をレイアウトしましたが、マージンを要素の外をレイアウトするのに使います。
マージンを指定したい場合、以下のような形を取ります。
#には全て数字が入ります。
margin-left: #;
ボックスを左から押し込む形にする。
margin-right: #;
ボックスを右から押し込む形にする。
margin-top: #;
ボックスを上から押し込む形にする。
margin-bottom: #;
ボックスを下から押し込む形にする。

margin: 値;
で指定する場合、位置関係で適用されるマージンが違ってきます。

margin: #;
#は上下左右のマージンを指定します。

margin: # *;
#は上と下のマージンを指定します。
*は左と右のマージンを指定します。

margin: # * ?;
#は上のマージンを指定します。
*は左右のマージンを指定します。
?は下のマージンを指定します。

margin: # * + ?;
#はmargin-topと同じ
*はmargin-rightと同じ
+はmargin-bottomと同じ
?はmargin-leftと同じ

<style type="text/css">
.di {background-color: #000000; color="#FFFFFF"; width: 200px; height: 30px; margin-left: 50px ;}
</style>
<p class="di">文字文字文字</p>

文字文字文字


上にあるように左から50px程レイアウトされているのが分かると思います。
パッディングはボックスの中身をレイアウトしましたが、マージンはボックスの外をレイアウトをすることが証明されました。

[MENUに戻る]
[HOME]