私がマージンをできるだけ使いたくない理由 - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 突然ですが、皆さんはCSSのmargin（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事では、「どうして避けているのか」について自分なりの考えをまとめてみたいと思います。 あくまでも個人の意見なので、こういう考えの人もいるのだなと捉えていただけますと幸いです。もっとこうしたら良くなるのに！というご意見は大募集しているので、どんどん教えてください。 マージンを使いたくない理由 マージンを使いたくない一番の理由に、スタイルが崩れると

[neet_modi_ki]

コンポーネントにはマージン含めて自身のレイアウト情報は持たせず、親からgridなりでレイアウトしていくのが現代的かなと。

[dexia2]

単純にコンポーネントはmarginを持つべきではないという点に集約されると思う。それさえ守ってくれれば、使う側で調整すればいいだけなので問題にはなりにくい

[nekoline]

flex/gridが使えるようになって（IEが消えて）marginやpaddingの出番は落ち着いた感じ。それ以前はめちゃめちゃ使ってたからそういう論争が多かった。実際はルール決めとけばそんなに困らない。

[hatfatcat]

marginをマージンとして使って、paddingをパディングとして正しい意図で使えばいいんだけど、両方とも隙間を空けるものという認識で使われると困る。

[Helfard]

合理的な仕様のように思えるが。

[kijtra]

paddingだと囲む要素を増やさないといけないからgap使うなあ。ネガティブmarginはたまにつかう。

[diveintounlimit]

仕様を理解できないから使いたくないってのはちょっとなぁ

[aceraceae]

margin の本来の意味を考えれば正しい挙動なわけだけど理解しないで使うとハマるんだろうね。

[nakag0711]

htmlは本来論文を表現するものだから。そこから流用に次ぐ流用でアプリ画面一般の表現手段になっちゃってるから妙な感じに

[n314]

仕様変更で背景色が必要になった場合という未来を考えると、背景色を塗りたくない場所がマージン。あとはクリックが反応する範囲外がマージン。

[akymrk]

“エレメント間を離したい際は、「そのエレメント自体がどのくらい離れたいか」という視点ではなく、なるべく親がレイアウトの責務を負う設計にすると良い”

[uehaj]

margineというのは斥力なんだと理解。斥力のあるコンポーネントはさぞかし使いづらかろう。tailwind のgrid,gap,col-ぐらいしか理解してないけどこれで世の中わたっていきたい

[mricopp]

相殺仕様はたまにムカつくから相殺されてる場合は効いてないmarginをなるべく消すようにしてる（無駄努力）

[eos2323]

昔は要素に「前へならえ」してもらうつもりでやってたけど今はジュラシック・ワールドのミームのイメージでいる

[yoshi-na]

マージンの上下はbottomを使ってtopは基本は使わないようにしてた

[sabinezu]

考え方的に少し古くない？コンポーネント自体にレイアウト情報は持たせるべきではないね。相殺とかそんなのは昔のハックみたいなもので素直な考え方ではない。世代が入れ替わるたびにリセットされてる感があるなぁ。

[matsui]

"余白"と考えれば良いのかも？

[Lhankor_Mhy]

兄弟間のマージン相殺は納得できる仕様だが、親子間マージン相殺はなんのためにあるのかわからん仕様。しかも、flow-rootで整形コンテキストを作ると相殺しなくなるし。

[soratomo]

マージンは確かに、他の要素に干渉する点で使い「ずらい」

[nekosann_08]

padding/borderを持つ要素、ブロック、謎の空白文字などが何らかの都合で間に突如挟まりmarginが全ツッパし始めて、な、なにィ！？と思う事も減ったなあ。grid/flex及びgapに感謝、ちょっと複雑度高いけど端処理も楽になった。

[kaz_shu]

margin はコンポーネントの外、 padding は中なので、そのコンポーネントの props には margin は不要。コンポーネントを使う側で制御する。

[ultimatebreak]

使いたくない理由はあんまり理解できないけど、解決策とまとめの内容は同意

[deep_one]

マージンは「最低これだけは離れていてほしい」という指定だと思えば疑問が出ない。章の前の空白と段落後の空白が重なったら章の前の空白だけでいい、という指定。／組み方が根本的にあかん気がする。

[pyagatupa]

「ずらい」が気になって内容が入ってこない派です。

[shige-u]

flex/gridを使うとその内側のmarginはflex/gridの外には飛び出ないので相殺は働かない。コンポーネントの一番外側の要素にflex/gridを付けておけば良いのでは？またはoverflow: hidden。コンポーネント間の親に任せる。

[sds-page]

最新のCSSフレームワークは理解できない挙動だらけなので俺にいじらせないでくれー

[ms05b]

わかる、上下の相殺は本当にクソ仕様だと思う。なんであんな事になってしまったんだろう？

[toaruR]

悩ましいときがあるよね（´－｀）仕方なくマイナスマージン入れてみたり

[tettekete37564]

ヘェーヘェー

[mayumayu_nimolove]

CSSの使い方が未だ統一されてないのは何でだろ。

[shoh8]

“マージンが不可解な挙動” はい。本当に全世界的にマージン廃止してほしい