« カスタムCSSについて | メイン | カスタムCSSについて(背景) »

カスタムCSSについて(余白・レイアウト)

カスタムCSSでレイアウトをするときに便利な「余白」に関係するプロパティを紹介します。

■margin(マージン)とpadding(パディング)

marginとは、領域の内側の余白を設定をするものです。
逆にpaddingとは、領域の外側の余白を指定するものです。
値の単位は主に「px(ピクセル)」を使用し、「5px」「10px」のような書き方をします。
下図は、左側に余白を指定したときの両者の違いを示しています。

ブログのレイアウトでは、この2つがよく使用されています。

margin

外側の余白の値を指定する
margin-top
外側上部の余白の値を指定する

margin-bottom

外側下部の余白の値を指定する

margin-right

外側右部の余白の値を指定する

margin-left

外側左部の余白の値を指定する

padding

内側の余白の値を指定する

padding-top

内側上部の余白の値を指定する

padding-bottom

内側下部の余白の値を指定する

padding-right

内側右部の余白の値を指定する

padding-left

内側左部の余白の値を指定する

一度に様々な余白を設定すると、レイアウト崩れの原因になります。
最初はシンプルに設定し、少しずつ慣れていきましょう!