【CSS】marginとpaddingで余白を調整する

余白

SHARE

CSSで余白をいかに操るかで、ウェブサイトにとって重要なレイアウトが決定づけられます。

本記事のゴール
  • 余白の概念を理解
  • marginを理解して、外側の余白を指定
  • paddingを理解して内側の余白を指定

まず、余白を指定できるのはブロック要素です。ここは、HTMLの基礎なので、しっかりと抑えましょう。
また、CSSのプロパティとか値って何？という方はこちらの記事を参考にしてみてください。

CSSの余白の概念

CSSではブロック要素の余白が指定でき、その方法は2つあります。

  1. marginでborderの外側の余白を指定
  2. paddingでborderの内側の余白を指定

全てのブロック要素にはborderなるものが設定されており、それは他の要素との境界線となります。
デフォルトではborderは見えませんが、borderプロパティを指定すると、出現します。

ボーダーが見えない状態で、marginやpaddingなどを指定しても、そこに違いはありませんが、実は borderの内側か外側かで異なる部分の余白を決定します。

margin(マージン)

margin(マージン)に関するプロパティは5つあります。

  1. margin
  2. margin-top
  3. margin-right
  4. margin-bottom
  5. margin-left

一番目のmarginの指定方法は4つあり、２～５番目のものは、それぞれ1つ指定方法があります。

パターン プロパティ+値の例
margin: 四辺すべて; margin: 10px;
margin: 上下　左右; margin: 10px 20px;
margin: 上　左右　下; margin: 10px 20px 30px;
margin: 上　右　下　左; margin: 10px 20px 30px 40px;

これだけでは実感がつかみにくいので、実際にmarginがどのように適応されているのか見てみましょう。

See the Pen rNebBEK by M2RnRT (@m2rnrt) on CodePen.

4つのarticleというブロックの中に、4種類のdiv要素を入れました。（わかりやすいようにborderを指定して、要素の境界線が見えるようにしています。）
CSSボタンをクリックしてみると、4つのdiv要素それぞれに対して、marginに少しだけ違う値を指定してあるのが分かるかと思います。

  • substance・・・１つの数値(20px)
  • substance2・・・２つの数値(20pxと40px)
  • substance3・・・3つの値(20px, 40px, 60px)
  • substance4・・・4つの値(20px, 40px, 60px, 80px)

すると、marginによって、枠の外の余白がどのように指定されたのかが分かるかと思います。

  • 1つの数値・・・上下左右に20pxの余白が適応
  • ２つの数値・・・上下に20px, 左右に40pxの余白
  • ３つの数値・・・上に20px, 左右に40px, 下に60px
  • ４つの数値・・・上に20px, 右に40px, 下に60px, 左に80px

以上がmarginプロパティに関する指定方法でした。
残り4つのプロパティの指定方法は非常に簡単です。

  • margin-top・・・上だけの余白を指定
  • margin-right・・・右だけの余白を指定
  • margin-bottom・・・下だけの余白を指定
  • margin-left・・・左だけの余白を指定

改めてmarginで大切なのは、border(ボーダー)の外側の余白を指定する、ということです。ここだけでも分かっていれば十分です。

padding(パディング)

padding(パディング)に関しては、margin(マージン)を理解していれば説明はいらないでしょう。
単純に、borderの内側の余白を指定する、というだけで、あとはmargin(マージン)と違いはありません。

パターン プロパティ+値の例
padding: 四辺すべて; padding: 10px;
padding: 上下　左右; padding: 10px 20px;
padding: 上　左右　下; padding: 10px 20px 30px;
padding: 上　右　下　左; padding: 10px 20px 30px 40px;

また、特定の方向だけ指定したいときも、marginと同じです。

  • padding-top・・・上だけの余白を指定
  • padding-right・・・右だけの余白を指定
  • padding-bottom・・・下だけの余白を指定
  • padding-left・・・左だけの余白を指定

さいごに

margin(マージン), padding(パディング)を理解するには、HTMLの要素がどのようにつくられるのかを理解するところから始まります。
ブロック要素とは何か、ブロック要素には境界線(border)が設けられている、ということが分かれば、あとはその内側か外側の余白を指定するのがこれらのプロパティなのだということです。

前の記事

CSSプロパティ一覧
【一覧】使用頻度の高いCSSプロパティ！

次の記事

【完全版】CSSのレイアウトは、Flexboxで完成！
Flexbox