div内のspan間に空白ができる問題

2 まとめ

HTMLレベルで改行があると、それはspaceになっちゃいます

これを回避するには、HTML上で改行をなくすしかない

Scrapboxもそうなってる

そうじゃなくて、ブロック要素としてこの問題が起きていることもある。この場合は inline-block; を使うなどブロックとしての配置を回避すれば良い

うん、回避してみたら、空白もなくなった

https://gyazo.com/b47132cd455d159014027859ecf93637

下が回避したver

https://gyazo.com/a9d0d950e32b8cec796afa4d62034937

-.icon

1

1 inline-block; で配置する

2 html上の改行のせいで空白になっているのを除去する

物理的に消すか、<!-->みたいなコメントでpaddingするか

どっちも微妙……🐰

3 display: table; で、そもそもブロック要素をやめる

3のやり方だとダメだ🐰

やっぱり改行を消すしかねえのか……

---

white-space？

スクボは .line に white-space: pre-wrap; を当てているが、俺のだと普通に改行されてしまう……

code:css

.line{

white-space: pre-wrap;

word-wrap: break-word;

}

div > span ではなく span > span にすればいい？

スクボもそうなってるわ

が、真似してもダメだなぁ🐰

上記 white space とか入れても同様

---

いや、スクボもhtmlとしては改行無かったわ🐰🐰🐰

開発者ツール上で、inner htmlをコピーしてみると違いが出た

https://gyazo.com/eb70cbaf5890af1f9f22eb2f896e23ed

上はスクボ