CSSのmarginとpaddingの違いとは？余白調整でどう使い分ければ良いのか

WEBサイトのレイアウトを調整する際に出てくるpaddingとmarginという言葉。

初めてWEBサイトを作る人にとっては馴染みのない言葉なので、どういう意味か分からない人も多いと思います。

paddingとmarginのことを調べても難しい解説ばかりで、なかなか分かりにくいですよね？

この記事ではmarginとpaddingの違いについて、ワードプレス初心者でも分かるよう簡単に説明していきます。

ボックスモデルの基礎知識

HTMLで余白やレイアウトを設定するためには、CSSのボックスモデルの概念を理解しておく必要があります。

CSSでは「ボックス」という四角い領域を生成し、それぞれの領域に余白の大きさや位置を指定してページのレイアウトを調整していきます。

どのような領域があるのか、図を使って順に解説していきます。

内容領域(contents)

WEBサイトを見た時に実際に表示される領域です。この領域に、テキストや画像を入力するとブラウザで表示されるようになります。

パディング領域(padding)

内容領域の外側にある領域です。

ボーダー領域(border)

パディング領域とマージン領域の間にある領域です。

マージン領域(margin)

要素の外側にある領域です。

padding、margin、borderの使い分け

マージン(margin)の考え方

marginは、要素の外側にある領域ですので、値を大きくするほど要素外側の余白部分を広げることになります。

marginの調整だけで考えるとこんな感じになります。

パディング(padding)の考え方

paddingは、要素の内側にある領域なので、値を大きくするほど要素内側の余白部分を広げることになります。

人間で例えると、人間の体型を決めるって感じですかね。

値を大きくするほど、脂肪が増えて太って大きくなるみたいなイメージを持ってもらえると分かりやすいかと思います。

ボーダー(border)の考え方

borderは、paddingとmarginの間にある隙間>のような領域です。

値を大きくするほど、その隙間の空間を広げることになります。

人間で例えると、その人が着ている服の分厚さをイメージしてもらうと分かりやすいと思います。

知っておくべきmarginとpaddingの違い

マージンとマージンは余白が相殺される

margin-right: 20px;とmargin-left: 20px;を設定しても、20px+20px＝40pxの余白ができる訳ではありません。

マージンとマージンは相殺され、左右の間隔は20pxとなります。(大きい値が優先されるので、20pxと30pxだと、30pxの余白ができます。)

一方パディングは相殺されないので、20px+20px=40pxとなり、左右の間隔は40pxとなります。

なお、縦方向のFlexアイテムではmarginの相殺は起きないので注意が必要です。

マージンにはマイナスの値が使える

マージンの値をマイナスにすると、要素と要素を重ね合わせることもできます。

margin-right: -20px;のように指定すると、要素の右側に20px分重なって表示されます。

一方パディングはマイナスの値を設定することはできません。

マージンはautoが使える

マージンはautoを使うことができるので、ブロック要素をセンターに配置したいときに便利です。

divにwidthで幅を設定し、marginの左右にautoを指定してあげるとセンターに配置できます。

一方パディングにはautoを設定することはできません。

以上、paddingとmarginとborderについて簡単に解説しました。

ボックスモデルの概念を理解すれば、おのずとmarginとpaddingについても分かってきます。

まずは自分で色々とコーディングをしてみて、感覚をつかんでみるのが良いと思います。