marginは文脈に基づいて適用する

Component同士のmarginをどう扱うか

例えばこういうComponentを定義したとき

https://gyazo.com/f474e561503cec9c9cd8704af75490e1

↓のように、Componentの定義内にmarginを含めるのは良くない

https://gyazo.com/9f9543e2885958249882bc3ec3070f38

並べた時に問題になる

https://gyazo.com/6ff74b0a225c6565b3d2a45c1ba8194e

中間の2つは良いが、一番下のmarginは不要、という場合もあるし

そもそも、欲しいmarginのサイズは文脈によって異なる

では、どうするか？

code:ts

<div class="mb-3">

<Box>

</div>

<div class="mb-3">

<Box>

</div>

marginが欲しいがために、新たにdivを導入している

このmarginはどこに属するものか？ということを考える

上で見たように、そのComponent自身に属するものではない

どのように指定するか

参考

このページは一切marginを使わずに作られている