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
を指定しています。