CSS

display: inline-block指定時にできる隙間を消す方法

More than 5 years have passed since last update.


意地でもCSSのみで何とかする場合

<ul>

<li>hoge</li>
<li>hoge</li>
</ul>

ul {

letter-spacing: -0.4em;
}
li {
letter-spacing: normal;
display: inline-block;
/* For IE 6/7 */
*display: inline;
*zoom: 1;
}

上記のように、inline-block指定する要素と、その親要素にletter-spacingをかけてやればOK。

でも効かないブラウザもあるから、どうしてもズレるのが嫌な場合は諦めてfloatで。


追記 - HTMLにちょっと手を加える場合

コメントでフォロー頂いた別の手法×2を追記。どれを使うかはお好みで。


1.改行削除 or コメントアウトする


htmlから改行を抜くか、コメントアウトすると隙間は無くなります。

(by kaminaly


<ul>

<li>hoge</li><li>hoge</li>
</ul>

<ul>

<li>hoge</li><!--
-->
<li>hoge</li>
</ul>


2.liの閉じタグを消す


XHTMLじゃないなら、li要素の閉じタグを書かないという手もありますね。

(by guimihanui


<ul>

<li>hoge
<li>hoge
</ul>