More than 5 years have passed since last update.

blockレベル要素をinlineにしたときに生じる隙間をなくすCSS

Posted at 2014-02-25

備忘録として。
blockレベル要素をdisplayでinlineにしたときに隙間が生じる。
これの原因はソース内でblockレベル要素を改行しているから。

test1.html

<!-- このように改行していると隙間が発生する -->
<div> hoge </div>
<div> fuga </div>

簡単に解決するには改行をなくせばいい

test2.html


<div> hoge </div><div> fuga </div>

でもこれじゃ属性とかいっぱい付けたときにひどく可読性が悪くなる。
そこでCSSのletter-spacingで一手間加えて隙間をなくす手法をとる。

test3.html


<!-- まずはインラインにしたい要素を囲む -->
<div id="container">
<div> hoge </div>
<div> fuga </div>
</div>

test.scss


div#container {
  letter-spacing: -.40em;
  div {
    display: inline-block;
    letter-spacing: normal;
  }
}

こうするとうまいこと隙間が消えてちゃんと隣り合って横に並んでくれる。