cssのbackgroundにできる奇妙な隙間を解消する方法（html,css）

margin相殺について
別記事を用意しました。
よければご覧ください。

margin相殺とは？「display:block」で「marginが計算通りにいかない」はこれが原因!?

marginの相殺は大きい値が優先される。 magin相殺が起きるのはdisplay:blockだけ。

omosirofuturestory.com

2020.08.03

説明

何が原因なのか？

こういった感じに作りたいのに

実際には、
こうなることがありませんか？

これは、
親子間のmargin相殺が原因になって
このようになっています。

どうすればいいのか？

解決策としては

　１：親要素、子要素の
　　　どちらかをinline-blockにして
　　　そもそもmargin相殺が
　　　起こらないようにする。

　２：スペース確保にmarginを使わず
　　　transform: translateを使う。

が、あります。

解決策１： inline-block

やることは簡単です。

子要素をinline-blockにする。
これだけです。
（下画像の”hello world”をinline-blockにする）

inline-blockが、新たな問題を起こす

inline-blockを使うことにより
margin相殺は回避できました。

しかし、
inline-blockは、
横に並ぶ性質があるため
新たな問題も発生します。

文字などが、横に入り込まれる可能性も

解決のため、
inline-blockにしたのは良いのですが

inline-blockは横並びなので、
文字や画像が、入り込む可能性があります。

inlineだと
１文字スペースさえあれば
入り込みます。

inline-blockも
スペースさえあれば
入り込みます。

解決策２：transform: translate

transform: translateX(10px) translateY(10px);

もう一つの方法は、
スペース確保にmarginを使わず
transform: translateを使う。

おそらく、
こちらの方が
使いやすいでしょう。

これは、
スペース確保にmarginを使わないため
margin相殺を起こしません。

しかも、
px値指定で自由に動かせます。

便利

transform: translateは、
マイナス方向にも指定ができます。

注意点も

transform: translateは、
なぜか、
　translateX(10px)
　translateY(10px)
と、２行に分けるとどちらかが機能しなくなります。

なので、
transform: translateX(10px) translateY(10px);
と、１行で書く必要があります。

transform: translateX(10px) translateY(10px);

さらに、
transform: translateは、
のちょっとしたクセもあるので
知っておくと良いでしょう。

そんな記事も用意しました。
よければご覧ください。

transform:translateは移動じゃない!?　本体と表示部分の説明（html,css）

こんにちは tanaka です。 今回は「transform:translate」の小話です。 小話なので気軽に読んでください。 「知ってました？」 「transform:translateは、本体が移動していないんですよ」 実は「tran...

omosirofuturestory.com

2020.08.14

まとめ

transform: translateX(10px) translateY(10px);