Zenn
📌

inline 要素同士の空白をなくす方法の個人的結論

に公開
CSS
tech

TL;DR

インライン要素が入る親要素の font-size を 0 にしつつ、子要素で適用したい font-size を指定する

<div class="parent">
  <span class="child">span1</span>
  <span class="child">span2</span>
  <span class="child">span3</span>
</div>

.parent {
	font-size: 0;
	line-height: 0;
}

.child {
	font-size: 14px;
	line-height: 1.4;
}

説明

margin で調整したり、色々四苦八苦してきましたが、結局 font-size を指定してしまうのが色々気を使わずスタイリングできると思っている

その他・コメント

slim や haml のテンプレートを使っているのであれば <, > で改行をなくした状態で出力することができる

Slim のドキュメント

https://rubydoc.info/gems/slim/#trailing-and-leading-whitespace

Haml のドキュメント

https://haml.info/docs/yardoc/file.REFERENCE.html#whitespace-removal--and-

Discussion