Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

display: inline;の余白を解決する方法

li要素をdisplay: inline;で横に並べた場合、要素ごとにソースを改行したり、スペースがあると余白ができてしまいます。

XHTML)

<div id="globalnavi">
<ul>
<li id="homenavi"><a href="<$MTBlogURL$>">home</a></li><li id="updateinfonavi"><a href="<$MTBlogURL$>updateinformation/">update information</a></li>
</ul>
</div>

(2)paddingとmarginで余白を調整する(CSS)

div#globalnavi li {
display: inline;
margin-right: 3px;
padding-left: 7px;
}

(3)コメントを利用する(XHTML)

<div id="globalnavi">
<ul>
<li id="homenavi"><a href="<$MTBlogURL$>">home</a></li><!--
--><li id="updateinfonavi"><a href="<$MTBlogURL$>updateinformation/">update information</a></li>
</ul>
</div>

(1)と(3)の方法はスマートではないので、個人的には(2)の方法を使用しています。