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（マージン）で余白の設定をすることをお勧めします。

NEXT⇒CSSのfloat


ｽﾀｲﾙｼｰﾄ(css)Menu
cssｽﾀｲﾙｼｰﾄ入門