inline要素(liタグなど)にできる隙間の消し方

よくliタグなどをinline-blockなどで横並びにしたときにできる、左右の隙間なのですが、その隙間の消し方をまとめました。

スポンサーリンク

消し方の種類

種類は全部で4種類かなと思います。(他にもあるのですが、下記くらいでいいかと)

改行をしない

その通りなのですが、html上でliタグを改行せずに描く方法です。

<ul>
  <li>テスト</li><li>テスト</li><li>テスト</li>
</ul>

コメントアウトを使う

こちらはhtml上でコメントアウトの記述をタグの間に入れる方法。

<ul>
  <li>テスト</li><!--
  --><li>テスト</li><!--
  --><li>テスト</li>
</ul>

font-size:0;を使う

こちらはcss上でfont-size:0;を指定する方法。親要素に指定しなくてはいけない所が注意です。

ul{
  font-size: 0;
}
ul li{
  display: inline-block;
}

letter-spacingを使う

こちらはscc上でletter-spacingを指定する方法です。
こちらは親要素でマイナスにして、子要素で普通に戻してあげるという作業です。

ul{
 letter-spacing: -0.5em;
}
ul li{
 display: inline-block;
 letter-spacing: normal;
}

大体これくらいですね、
横並びにしたいなら私は「inline-block」ではなくて「display: flex;」を使ってしまってます。
次はdisplay: grid;なども出てきてるのですが、とりあえずは安定の「display: flex;」オススメです!

コメント

タイトルとURLをコピーしました