More than 5 years have passed since last update.

inline要素を横並びにしてできる隙間を消す

Last updated at 2017-04-25Posted at 2014-10-22

要素をinlineにして横並びにすると、デザイン上、隙間が生まれます。原因は改行コードなので、HTMLで改行を行わなければいいのですが、コードの見栄え的によくありません。

また(コメントアウト)で改行による隙間を消すこともできますが、
こちらも見栄えとしてあまりいいとは思わないので、letter-spacingを使って消していきます。

HTML

<ul class="list">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

.list {
    letter-spacing: -.4em;/*文字を詰める(隙間を消す)*/
}
.list > li {
    display: inline;
    letter-spacing: normal;/*文字間を元に戻す(隙間は消えたまま)*/
}

以上です。他にも色々な方法がありますが、個人的にはこれがベターかなと思いました。