<li>タグを横並びにした時にできる隙間を消す

<li>をinline-blockで横並びにした時に隙間ができる時がある。
ListTagMenu
ソースはこんな感じ。

<!-- HTML -->
<ul>
  <li class="menu"><a href="#">メニュー1</a></li>
  <li class="menu"><a href="#">メニュー2</a></li>
  <li class="menu"><a href="#">メニュー3</a></li>
  <li class="menu"><a href="#">メニュー4</a></li>
</ul>

/* CSS */
.menu {
   background-color:#CCC;
   display:inline-block;
   line-height:25px;
   text-align:center;
   width:100px;
}

<ul>

</ul>

/* CSS */

.menu {

background-color:#CCC;

display:inline-block;

line-height:25px;

text-align:center;

width:100px;

}

これは<li>の後の改行が原因。ブラウザが<ul>の文字データと解釈してしまう。

対策方法

floatを使う

inline-blockをやめて、float:left;を使う。

table-cellを使う

display:inline-blockをdisplay:table-cell;にする。
ただしIEでは対応していないから今いち・・・。

<li>の改行をなくす

<ul>
　　<li class="menu"><a href="#">メニュー1</a></li><li class="menu"><a href="#">メニュー2</a></li><li class="menu"><a href="#">メニュー3</a></li><li class="menu"><a href="#">メニュー4</a></li>
</ul>

<ul>

</ul>

これは見にくい・・・。

改行部分にコメントを入れる

<ul>
  <li class="menu"><a href="#">メニュー1</a></li><!--コメント
  --><li class="menu"><a href="#">メニュー2</a></li><!--コメント
  --><li class="menu"><a href="#">メニュー3</a></li><!--コメント
  --><li class="menu"><a href="#">メニュー4</a></li>
</ul>

<ul>

<li class="menu"><a href="#">メニュー1</a></li><!--コメント

--><li class="menu"><a href="#">メニュー2</a></li><!--コメント

--><li class="menu"><a href="#">メニュー3</a></li><!--コメント

--><li class="menu"><a href="#">メニュー4</a></li>

</ul>

<li>の改行をなくすよりは良いかも。

タグの省略

<ul>
  <li class="menu"><a href="#">メニュー1</a>
  <li class="menu"><a href="#">メニュー2</a>
  <li class="menu"><a href="#">メニュー3</a>
  <li class="menu"><a href="#">メニュー4</a>
</ul>

<ul>

</ul>

ただ省略できるのはhtml5の場合。

font-sizeを0にする

改行が<ul>の文字扱いになってしまうのが原因なので、<ul>のfont-sizeを0にする。
ただブラウザによって効かない場合もあるらしい。