• RSS

[CSS]CSS の display:inline-block で並べた要素間の隙間を埋める方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly


この記事は コリス 様の記事を参考にさせていただきました。

[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 で並べた要素間の隙間を埋める デモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください