【CSS】marginを『正しい意味で』使う（余白）【722日目】

説明で使ったコードのCodePen

コードが実際に動いています。

https://codepen.io/klack710/pen/MWWWjvj

CSSでmarginが思ったように動かない

CSSで、箱を作成する。

.margin_box {
  margin: 10px 0;
  width: 80px;
  background-color: skyblue;
}

<div class="margin_box">
margin
</div>

---

margin

---

こんなふうに箱が出来上がりますね。

これを２つ並べるときに、こう考えました。

『上下に10pxずつ隙間を用意して、ものを配置したい』
『そうすると、両方の隙間を足して、20pxの隙間がそれぞれ出来上がるはずだ』
よし、marginを使って書こうっと。

---

margin

margin

---

ところが、このように、２つの間は10pxしか空きません。

marginの特性

2つのマージンが重なったとき、大きい方のmarginの値が適応される特性があります。

ここで一つ考えます。なぜでしょう。

それは、marginは空白を作るのではなく、余白を作るもの。
『最低限これくらいの幅は余らせてね！』っていうものです。

人間が並んで座っているときに、あなたは隣の人と30cmくらい空白があれば、  
密着してると感じないとします。  
そして、隣の人も同じ考えだとします。

このとき、必要な幅はいくつでしょうか。30cmですね。

marginはあくまで空白がこれくらいあれば、この要素が許してくれるという幅を指定するものであって、『空白を作る』ものではありません。

空白を作るって？

では、空白を作るとは？

空白という要素を作るということ。

以下は一例です。

.blank_box {
  padding: 10px 0;
  width: 80px;
}

.content_box {
  width: 80px;
  background-color: red;
}

<div class="blank_box">
  <div class="content_box">
  blank
  </div>
</div>
<div class="blank_box">
  <div class="content_box">
  blank
  </div>
</div>

---

blank

blank

---

これで、一旦イメージと一緒になったと思います。

最後に

この話で言いたいことは、空白の作り方ということではなく、
意味を正しく捉えて扱うということです。

『○○はこうだから、実質〇〇だよね』は、想定外の動きをしたりします。

自分が扱っているもの、そして作りたいものはなにかを正しく捉えてコーディングしていきましょう。