【HTML初心者】marginとpaddingの違いを理解する

HTML初心者の皆さん、marginとpadding上手に使えてますか？

私は使えてません・・・。

ボックスの外側と内側を設定する違いっていうのは頭ではわかっているつもりなのに、実際にやってみると
頭の中で設定したい余白のイメージを表現できないんですよね。

なので、練習してみることにしました。

margin＝外側広くなるだけ、padding＝要素自体が大きくなる

mariginとpaddingの両方のボックスに、20px設定してみました。

<div class="box margin">marginの例</div>
<div class="box padding">paddingの例</div>

<style>
.box{
  border: 4px solid red;
  width: 200px;
}

.margin{
background-color: pink;
  margin: 20px;
}

.padding{
background-color: pink;
  padding: 20px;
}
</style>

横並びにしてみます。

.box{
  display: inline-block;
}

つまずきポイント１．縦のmarginは足し算にならない

何それ？意味不明って感じですよね。

実際にやってみた方が早いので、コードを書いてみます。

「aの下20pxあける、bの上20pxあける」コードを書くと、aとbの間は、20＋20の、40px分スペースが空くんだと思っていたんですね。

<div class="boxxx a">上の要素</div>
<div class="boxxx b">下の要素</div>
<style>
.boxxx{
  border: 4px solid red;
  width: 200px;
}

.a{
  margin-bottom: 20px;
}

.b{
  margin-top: 20px;
}
</style>

でも、
そうではなくて、20px分しかスペース空かないんです。

横は普通に足されて40px分スペースが空くのに、縦だけは相殺されてしまうんですね。これ、最初意味不明で混乱しました・・・。

<div class="wrapper">
<div class="boxxxxx a2">上の要素</div>
<div class="boxxxxx b2">下の要素</div>
</div>

<style>
.wrapper{
  display: flex;
}

.boxxxxx{
  border: 4px solid red;
  width: 200px;
  background-color: pink;
}

.a2{
  margin-right: 20px;
}

.b2{
  margin-left: 20px;
}
</style>

まとめ

なんか、分かったような分かっていないような・・・そんなぼんやりとした感じです。

使っていくうちに、すっきりと分かるようになる日がくるのかもしれません・・・。