marginは文脈に基づいて適用する
Component同士のmarginをどう扱うか
例えばこういうComponentを定義したとき
↓のように、Componentの定義内にmarginを含めるのは良くない
並べた時に問題になる
中間の2つは良いが、一番下のmarginは不要、という場合もあるし
そもそも、欲しいmarginのサイズは文脈によって異なる
では、どうするか？
style都合でHTML構造を変えるべきでないので以下のようにやるのは良くない
ts<div class="mb-3">
<Box>
</div>
<div class="mb-3">
<Box>
</div>marginが欲しいがために、新たにdivを導入している
なのでこの記事のSpacerもstyle都合のHTML要素なので微妙
このmarginはどこに属するものか？ということを考える
上で見たように、そのComponent自身に属するものではない
どのように指定するか
基本的にgapを使えば良さそう
参考
サンプルページが用意されている
このページは一切marginを使わずに作られている