ホームページの余白を設定する（margin)

ホームページのページの余白や、画像の余白などの上下左右の
余白を設定しよう！


ページや画像の余白を決めるのはmargin（マージン）と言います。

マージンもCSSで設定できるとベストですね！
できるだけHTMLでの設定ではなくて、CSSの設定をできるようにしましょうね！



CSSでマージンを設定する場合。

たとえば、ページ全体の余白を設定する場合bodyタグに
直接マージンを設定すればいいのです。


上の余白は　　margin-top
下の余白は　　margin-bottom
左の余白は　　margin-left
右の余白は　　margin-right


となります。

上の余白を30pxにしたい場合は

body {margin-top:30px}

という風にすればできますよ！


上下左右のマージンをまとめて設定する方法もあります。

margin:〇　　　　上下左右すべてに同じ余白
margin:○●　　　上下・左右の余白値
margin:●○◎　　上・左右・下の余白値
margin:○△□●　上・右・下・左の余白値

となります。




HTMLで余白を設定する場合は、以下のとおり。

topmargin="●"
bottommargin="●"
leftmargin="●"
rightmargin="●"