こんにちは、荒木です。今日はreactやvue等でコンポーネントを実装する際にCSSではmarginを使わないと聞くことがあると思います。その理由を簡単な例を通して見ていこうと思います。
例の前にまとめてをいうと、marginを使うと修正コストが増えることが多いからです。
では以下のカードUIに画像とタイトルが含まれている例を見ていきます。
カードUI
右のキャプチャから分かるように、Titleはcontent内にあり、marginを使用して自身の位置を決定しています。
つまりこの状態は、contentが親要素ですが、Titleがその子要素の位置を決定しているわけではないと言えます。
現在のコンポーネントは次のようになっています。
<Card>
<Image />
<Content>
<Title />
</Content>
</Card>予期しないレイアウト
先程の例では、marginを使わない理由はわかりませんね。次にTitleの上にTagsタグを追加してみます。
<Card>
<Image />
<Content>
<Tags />
<Title />
</Content>
</Card>tag1とtag2を追加してみると、当然にTitleからmargin分が離れてしまいます。上のコンポーネント例を見ただけではTagsとTitleが離れるような雰囲気は感じられません。本来は以下のようなレイアウトを予想しいるはずです。
コードからすぐに表示の様子がわからないのはよくないですし、Tagsを意図する場所に配置しようとするとTitleの中身を修正しなければいけません。これがmarginの良くない点だといえます。
右のキャプチャのようなpaddingを使用していれば、不要なコードの修正も予期しないレイアウトも避けられることが多くなるはずです。
まとめ
簡単な例ですが、親要素が子要素の位置を決めるようなCSSを書くと、修正が少なくなったりレイアウトの見通しがよくなるということが感じられたかもしれません。
marginというのは子要素が親要素に影響を与えるので、逆のことをしてしまうから良くないことが起こることがあります。paddingだと親要素が子要素に影響を与えるので使っていきましょうってことでした。
今回は、要素の位置だけでしたが、子要素のサイズを親要素から指定するようにすると変更に強いコードがかけるので設計時に気をつけてみるのがおすすめです。