こんにちは。制作のSです。
最近コーディングの勉強を始めたので、復習も兼ねてコラムを書いていきたいと思います。
今回は業務で必ずと言っていいほど使用する、marginとpaddingについてです。

そもそもmarginってなに？paddingと何が違うの？

margin、paddingとは要素の周りの余白を指定するプロパティです。
どちらも余白を指定するものですが、marginは要素の外側の余白、
paddingは要素の内側の余白を指定するときに用います。

実際にコーディングしてみる

まずは、要素(プランニングA)に対し、内側の余白(padding)を20px付けてみます。
※分かりやすいように背景色をグレーにしています。

入力の仕方は下記のようにいくつかあるのですが、
今回は①のように、上下左右の余白を一括で指定していきたいと思います。

①padding: 20px　「上下左右」まとめて指定
②padding: 20px 20px　「上下」「左右」を指定
③padding: 20px 20px 20px　「上」「左右」「下」を指定
④padding: 20px 20px 20px 20px　「上」「右」「下」「左」を指定

HTML

<div class="column">
<p>プランニングA</p>
<p>プランニングA</p>
</div>

CSS

.column p {
  font-size: 30px;
  padding: 20px;
  background-color: #bbb;
  width: 300px;
}

表示

要素の内側に20pxの余白が付きました。

外側に余白を付ける

このままでは2つの要素間に隙間が無いので、
要素の外側に20pxの余白を付けてみたいと思います。

CSS

.column p {
  font-size: 30px;
  margin: 20px;
  padding: 20px;
  background-color: #bbb;
  width: 300px;
}

marginを使用して、要素をセンター揃えにする

marginで外側の余白を調整できるなら、センター揃えにもできそうです。
そこで便利な値が、「auto」状況に応じて自動で値を調整してくれます。

上下、左右それぞれ同じ値なので、下記②のように指定していきたいと思います。

①padding: 20px　「上下左右」まとめて指定
②padding: 20px 20px　「上下」「左右」を指定
③padding: 20px 20px 20px　「上」「左右」「下」を指定
④padding: 20px 20px 20px 20px　「上」「右」「下」「左」を指定

CSS

.column p {
  font-size: 30px;
  margin: 20px auto;
  padding: 20px;
  background-color: #bbb;
  width: 300px;
}

あとがき

今回のコラムを通して新たに学んだのですが
一段目の下の余白と二段目の上の余白、この二つの余白がぶつかると値が大きい方のmarginに相殺されるそうです。
コーディングは奥が深く毎日めげそうになりますが、
自分の思い通りになった時はパズルのピースがはまるような達成感があります。
次回のコラムが回ってきた際にできることが増えているように、コツコツ勉強していきたいと思います。