スポンサード

[CSS]float を利用せずに display:inline-block で要素を横並びにする方法の記事でも紹介していますが、display:inline-block で要素を横並びにした場合に発生する「要素間の隙間を埋める」方法の紹介です。

PX 単位で隙間を埋める

一番分かりやすいのが、隙間分だけネガティブマージンで隙間を埋める方法です。

<style>
ul li	{
	display:inline-block;
	/display:inline;
	/zoom:1;
	padding: 5px;
	margin:0 -5px
}
</style>

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>

margin の値はデザインに合わせて補正します。
IE6 まで対応となると、IE用のハックが必要かもしれません。

要素のマークアップを変更

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

コリス様の記事によると、以下のようにマークアップすると要素間の隙間が埋まる模様。

<ul>
	<li>リスト1</li
	><li>リスト2</li
	><li>リスト3</li>
</ul>

または、以下のように </li> の位置をずらす方法でも隙間を埋める事ができるようです。

<ul>
	<li>
	リスト1</li><li>
	リスト2</li><li>
	リスト3</li>
</ul>

子要素にコメントタグの挿入

子要素の間にコメントタグ（<!– –>）を挿入することでも、隙間は埋まるようです。

<ul>
	<li>リスト1</li><!--
	--><li>リスト2</li><!--
	--><li>リスト3</li>
</ul>

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

親要素に font-size:0 を指定する方法です。

子要素にはフォントンサイズを指定する必要がありますが、HTML側でタグの位置を調整する必要がないので、この中では使えそうな方法のような気がします。

<style>
ul		{
	font-size:0
}

ul li	{
	font-size:12pt
}
</style>

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>

ここまでの対処法を、以下のサンプルページにまとめてみました。
display:inline-block で並べた要素間の隙間を埋める デモ

スポンサード