Webサイトを作っていくなかで、Webサイトは様々なブロックの集まりであることを理解する必要があります。

ヘッダーのブロックであったり、メニューのブロック、画像のブロックなどを並べることでWebサイトの見た目をキレイに整えることができます。

そのブロックとブロックの間にあるのが余白になります。

今回は、その余白をCSSで調節する方法を解説します。

CSSで余白をうまく調節できないと、デザインを忠実に再現することはできません。

この記事で余白を学び、キレイなWebサイトを作成しましょう。

CSSで調節できる余白は2種類ある

CSSで調節できる余白は、下記の2種類の余白があります。

この2種類は同じ余白のように見えますが、全くの別物ですので、ブロックのどの部分に余白ができるかを理解して使い分けをしましょう。

それぞれの特徴を画像を用いながら解説します。

ブロックの外側の余白を調節するmargin

まずはブロックを構成する要素を理解する必要があります。

下記の画像を参照してください。

中心に横幅(width)や縦幅(height)を指定できる要素があります。その周りにpaddingがあり、borderで指定する線が外側にきます。ここまでが一つのブロックとなります。

marginはそのブロックの外側に余白を設けます。

ブロックの内側の余白を調節するpadding

paddingはブロックの中の余白を指定します。内側に要素があり、外側にborderがあります。

paddingはボタンなどブロックの幅を広げたい時に使用されることが多いです。

marginやpaddingの記述方法

marginやpaddingの記述方法は同じです。

余白は上下左右に指定することができ、一括で全ての値を指定する方法や上下左右の一つだけを指定する記述方法があります。

記述方法を知ることで無駄なコードを減らすことが可能です。

ここでは、ショートハンドと上下左右の一つだけを指定して余白を挿入する記述方法を紹介します。

ショートハンド

ショートハンドとは、記述量を減らして指定する方法です。

まずは上下左右全ての余白が同じ値の場合のコードを紹介します。

CSS
.block2{
margin:20px;
}

この一行だけで上下左右に余白を指定できました。paddingでも同じ指定方法が可能です。

続いて、上下と左右の余白の値が違う場合のコードです。

CSS
.block2{
margin:20px 30px;
}

続いて、上下が違う値で左右の余白が同じ値の場合のコードです。

CSS
.block2{
margin:20px 30px 40px;
}

前から上、下、左右の順で記述します。

続いて、上下左右全ての余白の値が違う場合のコードです。

CSS
.block1{
margin:10px 20px 30px 40px;
}

上記で紹介してきたコードは全てpaddingも同じ記述をすることができます。

基本的にはショートハンドを使用して記述することが多いので、順番は覚えておきましょう。

上下左右をそれぞれで記述

Webサイトを作成する際に余白は上下左右の一部分のみに適用する機会が多いです。

特にセクションとセクションの間に余白を入れることが多く、ブロックの上にのみmarginを指定することがあります。

その時は、margin-topを指定し、上だけに余白を挿入します。

CSS
.block1{
margin-top:20px;
}

もし右側にのみ余白を挿入したい場合は、margin-rightを使用します。

CSS
.block1{
margin-right:20px;
}

左のみであれば、margin-leftを指定し、下のみであればmargin-bottomを指定します。

CSSの余白を指定するmarginは相殺に注意

CSSでmarginを使用する際に注意しなければならないのがmarginの相殺です。

相殺を簡単に説明すると、隣り合うブロックの余白が重なり合う時に、その余白の幅は値が大きい余白のみ適用されるというものです。

marginの相殺の例を紹介します。

CSS
.block1{
margin-bottom:20px;
}
.block2{
margin-top:30px;
}

上記のコードを記述した時に、ブロック1とブロック2の間の余白は20pxと30pxを足して50pxの余白ができるように思われます。

しかし、実際は以下の画像のようになります。

値が大きいブロック2のmargin-topのみが適用されます。

このmarginの相殺はpaddingでは起こらないので注意が必要です。

marginの相殺を考えた時に、ブロックごとの上下の余白は上にのみ指定すると決めておく方が効率が良く、記述ミスも減らすことができます。bottomが混ざってしまうと上下のどちらが適用されているかわかりにくいからです。

CSSで余白を調節する方法：まとめ

CSSで余白を調節する方法について解説しました。

この記事のまとめは以下になります。

Webサイトを作成する上で余白の知識は必須です。

CSSで余白を細かく調節することで、キレイなWebサイトを再現できます。

まずは余白の場所と記述方法を確実に理解しておきましょう。