CSS の display:inline-block で並べた要素間の隙間を埋める方法

PX 単位で隙間を埋める方法

margin:0 -3px で要素間の隙間を埋める例です。


<li> タグの改行位置の調整(1)

<li> タグの改行位置を変えてみます。

<ul class="nav">
	<li><a href="#">リスト1</a></li
	><li><a href="#">リスト2</a></li
	><li><a href="#">リスト3</a></li
	><li><a href="#">リスト4</a></li
	><li><a href="#">リスト5</a></li>
</ul>

<li> タグの改行位置の調整(2)

別の形で、<li> タグの改行位置を変えてみます。

<ul class="nav">
	<li>
	<a href="#">リスト1</a></li><li>
	<a href="#">リスト2</a></li><li>
	<a href="#">リスト3</a></li><li>
	<a href="#">リスト4</a></li><li>
	<a href="#">リスト5</a></li>
</ul>

子要素にコメントの挿入

子要素の間にコメントタグ(<!-- -->)を挿入する方法です。

<ul class="nav">
	<li><a href="#">リスト1</a></li><!--
	--><li><a href="#">リスト2</a></li><!--
	--><li><a href="#">リスト3</a></li><!--
	--><li><a href="#">リスト4</a></li><!--
	--><li><a href="#">リスト5</a></li>
</ul>

親要素に font-size:0 を指定

親要素に font-size:0 を指定する方法です。
子要素には font-size:12pt を指定しています。