横並びに配置したインライン要素の隙間を埋める7つの方法

こんにちは、つばさ（@tsubasa123）です。

先日、スマホサイト向けのシェアボタンのカスタマイズを考えていたんですが、CSS？HTML？の基礎をちゃんと理解せずに結構時間を無駄にしてしまったので同じ過ちを繰り返さないように簡単にメモっときます。今回のポイントは「全幅」と「スペース・改行」になります。よろしくお付き合いください。

なにこの余白
改行が悪いらしい
なおしかたは多種多様
さいごに

なにこの余白

スマホ向けのカスタマイズだったので、シェアボタンを3つ、余白無しでピッチリ全幅で並べたデザインにしたかったのです。

Hatebu
Twitter
Facebook

こんな風に。ちなみに指定したタグとCSSはこんな感じ。

<style>
ul li {
display: inline-block;
width: 33.33%;
text-align: center;
border: 1px solid;
}
.hatebu {
color: #00A4DE;;
}
.twitter {
color: #55ACEE;
}
.facebook {
color: #405BA7;
}
</style>
<ul>
<li class="hatebu">Hatebu</li>
<li class="twitter">Twitter</li>
<li class="facebook">Facebook</li>
</ul>

アイコンやシャドウなどの細かい装飾に関しては省略していますが、大枠としてはこんな感じ。<li>タグをインラインブロックにして横に並べようという単純なものです。かんたんかんたん。

と思ったのですが、どういうわけか、

Hatebu
Twitter
Facebook

このように1つ目と2つ目のボタンの間に勝手に余白が入ってしまって、3つ目のボタンがカラム落ちしてしまいました。あらあら、かっこ悪い。

はてなブログのスマホ用のCSSを読み込ませた上でCSSの実装を行っていましたので、どうせどこかで<li>タグとか<a>タグにパディングかマージンつけてるんだろうなーなんて思ってデベロッパーツールで探し回っても見つからない。ソースコードを読みにいっても特に変な記述はない。

んー、どゆこと。

改行が悪いらしい

無い知恵を捻ってもしょうがないので素直に検索。「css inline 余白」みたいなキーワードで検索してみると、まぁたくさん引っかかってくるわけで。

結論から申しあげますと、各ボタンを囲っていた<li>タグを改行して記述するとブラウザに出力された際に隙間ができてしまうようです。確かに、言われてみれば昔何度も経験したような。成長していない自分にガッカリです。

正確には改行だけでなく、スペースでも隙間が空くようです。スペース入れてるんだから隙間が空くのは当然？知り合いの方に聞いてみると「英語圏で使われることを想定した仕様だった気がする」とのこと。

きっと、

<span>red</span><span>green</span><span>blue</span>

こんな風にインライン要素で単語をいくつか並べて記述したときに、いい感じに単語の間にスペースが入るように調整されている、ってことなんじゃないでしょうか。んー、日本語圏では必要ない仕様ですが、まぁ仕方なし。

なおしかたは多種多様

CSSだけでなおす方法もあれば、HTML側で対応する方法もあるようです。一番シンプルなのは改行をなくすことなんでしょうけど、せっかく調べたので後学のためにも記しておきます。

1行で記述する

<ul>
<li class="hatebu">Hatebu</li><li class="twitter">Twitter</li><li class="facebook">Facebook</li>
</ul>

説明不要ですね。リストが長くなると保守するのが難しくなるのが難点ですが、HTMLを直接編集できる場合はこれが一番簡単だと思います。コメントアウトで1行にしている理由を明記しておくと、後で修正するときや他の人が修正する際に発生する問題を回避しやすいと思います。

コメントアウトを記述する

<ul>
<li class="hatebu">Hatebu</li><!--
    --><li class="twitter">Twitter</li><!--
    --><li class="facebook">Facebook</li>
</ul>

これでもOKです。こちらもコメントアウトの理由を書いてあげると親切かな。知らない人が見たら、なんぞこれ、ってなりそうですので。

親要素のfont-sizeを0にする

<style>
ul {
font-size: 0;
}
ul li {
font-size: 1em;
}
</style>
<ul>
<li class="hatebu">Hatebu</li>
<li class="twitter">Twitter</li>
<li class="facebook">Facebook</li>
</ul>

親要素のfont-sizeを0にすることでも隙間を調整することができます。この場合、子要素がfont-sizeプロパティの値を継承してしまうので、必ず元に戻してあげる必要があります。複雑なフォント指定をしていないならまぁわかりやすいかと。

要素をfloatする

<style>
ul::after {
content: '';
display: block;
clear: both;
}
li {
float: left;
}
</style>
<ul>
<li class="hatebu">Hatebu</li>
<li class="twitter">Twitter</li>
<li class="facebook">Facebook</li>
</ul>

floatも余白がなくなります。なんとなくイメージはできますが、個人的にはあまり好きじゃないやり方ですね。親要素で高さがとれなくなってしまいますので、回り込みを解除するのを忘れないようにしましょう。

letter-spacingで調整する

<style>
ul::after {
letter-spacing: -0.4em;
}
li {
letter-spacing: normal;
}
</style>
<ul>
<li class="hatebu">Hatebu</li>
<li class="twitter">Twitter</li>
<li class="facebook">Facebook</li>
</ul>

これでもいけるみたい。固定値で指定してるけど、文字サイズが変わった時大丈夫なのかなって最初思いましたが、意外と大丈夫みたいです。すごいけど、ふるーいブラウザだと効かないっぽいですね。

閉じタグを省略する

<ul>
<li class="hatebu">Hatebu
<li class="twitter">Twitter
<li class="facebook">Facebook
</ul>

なんかどうなの、みたいなビジュアルですが、HTML5は閉じタグが省略できるようでして、これもバリッドな記述のようです。個人的にはナシかな。

ネガティブマージンで調整する

<style>
li {
margin-right: -4px;
}
</style>
<ul>
<li class="hatebu">Hatebu</li>
<li class="twitter">Twitter</li>
<li class="facebook">Facebook</li>
</ul>