Blog

HOME > Web > css > 【CSS】inline-blockの隙間をなくす方法

【CSS】inline-blockの隙間をなくす方法

2017/12/09

css

備忘録です。

inline-blockはfloatと同じように使えるものの、隙間ができますよね。
そこで隙間を無くす方法です。

参考サイト
inline-blockの隙間をなくす方法

font-sizeで隙間を詰める方法

HTML

<ul class="wrap">
    <li class="inline-block">
        テキストテキストテキストテキスト
    </li>
    <li class="inline-block">
        テキストテキストテキストテキスト
    </li>
    <li class="inline-block">
        テキストテキストテキストテキスト
    </li>
</ul>

CSS

.wrap{
    font-size:0;
}
.inline-block{
    display:inline-block;
    font-size:12px; /* フォントサイズ0になっているので指定する */
}

letter-spacingで隙間を詰める方法

CSS

.list { /* 親要素 */
    letter-spacing: -.4em; /* 文字間を詰めて隙間をなくす */
}

.list li { /* 子要素 */
    display: inline-block;
    letter-spacing: normal; /* 文字間を元に戻す */
}

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ