liを使って、naviボタンを横並びで表示させるとき、もっとも簡単な方法としては、liに「display: inline-block」と指定してインライン表示にするものがあります。 とても便利なのですが、その反面、htmlの書き方によっては、liとliの間に余計な隙間ができてしまいます（inlineの改行は、半角の空白として認識されるため）。ぴったり隙間無しのデザインにしたい場合はこれに対処する必要があります。

サンプルはどれも横幅800pxの親要素の中に、幅20%のli要素を横並びで入れてあります。幅20%の要素を5つなので、本来はぴったり収まるはずですが、サンプル１では、liとliの間に余計な5pxほどの隙間（liタグの改行による）が生じたために親要素の幅に収まりきらず、レイアウトが崩れます。

サンプル１（レイアウト崩れ）

サンプル１のhtmlソース

  <ul>
    <li>home</li>
    <li>about</li>
    <li>products</li>
    <li>services</li>
    <li>contact</li>
  </ul>

サンプル共通のCSSソース

.navi {
	width:800px;
	margin:0 auto;
	}
.navi ul {
	margin:0;
	padding:0;
	}
.navi ul li {
	background-color: #37d;
	color:#fff;
	padding:4px 0;
	text-align: center;
	display: inline-block;
	font-size: 14px;
	width: 20%;
	}
.navi ul li:nth-child(even) {
	background-color: #64d;
	}

● htmlのliの記述で改行せず一列にすることで、この隙間をなくすことができます。ただし、ソースがとても見づらくなります。

サンプル２（隙間をなくす１）

サンプル２のhtmlソース

  <ul>
    <li>home</li><li>about</li><li>products</li><li>services</li><li>contact</li>
  </ul>

● htmlのliの記述を変更することなく隙間をなくす方法です。サンプル３はサンプル１と同じhtmlとCSSを使い、ulの指定のみ「font-size:0」を追加しています。文字の表示に関しては、liであらためて「font-size:14px」を指定しているので、問題ありません。

サンプル３（隙間をなくす２）

サンプル３のCSSソース（変更部分のみ）

.navi2 ul {
	margin:0;
	padding:0;
	font-size:0; /* 追加　*/
	}