ホームページ作成講座HAC Design

CSS　margin

margin（マージン）とは、レイアウト文字や文章を表示したりする場合の内容の領域の設定をするものです。余白などをとり見栄えをよくする為に表示する領域の指定ができるのが、margin（マージン）とpadding（パディング）です。

このmargin（マージン）とpadding（パディング）はともに余白などの領域を指定できるものですが、このふたつには微妙な違いがあります。margin（マージン）とpadding（パディング）の違いが理解できるようになると、ブログのカスタマイズもさくさく進むはずです。

また微妙なレイアウトの調整もできるようになります。

しかしmargin（マージン）とpadding（パディング）は似ているので違いがわかりにくいのです。
わかりやすいようにイラストとともに説明しますね。

CSS　margin（マージン）とpadding（パディング）の違い

margin（マージン）とpadding（パディング）の違いは簡単に言ってしまえば、背景ごと移動するのがmargin（マージン）、中の文字だけ移動するのがpadding（パディング）です。
下記のように背景の設定がしてあるタグにそれぞれ30pxの余白を設定します。

margin-left:30px を設定した場合、タグそのものがまるまる30px移動します。

padding-left:30px　を設定した場合中身の文字だけが30px移動します。

この違いはよく覚えておきましょう。ブログなどではこのmargin（マージン）とpadding（パディング）が数箇所で設定されています。サイドバーが落ちてしまったときはこのmargin（マージン）とpadding（パディング）の数値の設定がおかしくないか？チェックしてみるといいでしょう。

また、背景を設定していないタグでは、どちらをつかっても見た目が変わらないので、わかりにくいかと思います。自分でこの違いを理解するには、背景の設定してあるタグで試してみましょう。

padding（パディング）は設定する際に、横の幅の設定を確かめて、レイアウトからはみ出ないような設定をすることを頭に入れて置いてください。padding（パディング）をあちらこちらで設定するとレイアウトが崩れたとき混乱するので、どちらをつかっても見た目が変わらない場合はmargin（マージン）で余白の設定をすることをお勧めします。

CSS　margin（マージン）とpadding（パディング）の設定

下記はmargin（マージン）とpadding（パディング）の書き方の例です。

margin	例	まとめて設定した場合
margin-top	margin-top:30px	margin:30px 0px 0px 0px
margin-bottom	margin-bottom:30px	margin:0px 0px 30px 0px
margin-right	margin-right:30px	margin:0px 30px 0px 0px
margin-left	margin-left:30px	margin:0px 0px 0px 30px
padding	例	まとめて設定した場合
padding-top	padding-top:30px	padding:30px 0px 0px 0px
padding-bottom	padding-bottom:30px	padding:0px 0px 30px 0px
padding-right	padding-right:30px	padding:0px 30px 0px 0px
padding-left	padding-left:30px	padding:0px 0px 0px 30px

ここで覚えておきたいのがまとめて設定した場合の書き方です。
たとえば、【margin-top】【margin-bottom】【margin-right】【margin-left】にそれぞれ違う数値を設定したい場合などに便利です。CSSがスッキリまとまるというメリットがありますが、検索エンジン対策になるわけでもないので、書き方は好きな方でOKです。

それでは数値は同じ設定で書き比べてみましょう。

#bannar{
margin-top:30px;
margin-bottom:10px;
margin-right:20px;
margin-left:40px;
}

上記のような設定をまとめると下記のようになります。

#bannar{
margin:30px 20px 10px 40px;
}

このように値を4つ指定した場合は記述した順に[上][右][下][左]のマージンとなります。
その他にまとめて設定する場合は下記のようになります。

値を1つ指定した場合は指定した値が[上下左右]のmargin

#bannar{
margin:30px;
}

上下左右に30pxの余白ができる。

値を2つ指定した場合は記述した順に[上下][左右]のmargin

#bannar{
margin:30px 20px;
}

上下に30px 左右に20pxの余白ができる。

値を3つ指定した場合は記述した順に[上][左右][下]のmargin