Blog

floatで下に謎の隙間が空いちゃうときはdisplay:inline-blockを使う

2014.05.14 コーディング

要素をfloatで横並びにすると、その要素の下とかブラウザの最下部などに謎の隙間が空くことがあります。

こういった場合、floatではなくdisplay:inline-blockを指定してみるといいかもしれません。

floatで下に謎の隙間が空いちゃうときはdisplay:inline-blockを使う

以下のソースをサンプルにします。

余分なところ省いてみたらものすごくすっきりしちゃいましたが、クラス名「parent」というdiv要素の中に、クラス名「child_l」「child_r」という子要素を横並びにします。

「parent」の横幅は620pxで、「child_l」「child_r」の横幅は300px。

「child_l」にはmargin-right:20pxを指定して親要素「parent」の横幅にぴったりはめたいという感じです。

HTML
<div class="parent">

<div class="child_l">これを横並びにします。</div>
<div class="child_r">これを横並びにします。</div>

</div><!-- .parent -->
CSS
.parent {
	width: 620px;
}

.child_l {
	width: 300px;
	margin-right: 20px;
	float: left;
}
.child_r {
	width: 300px;
	float: left;
}

要素と要素の間の改行を削除

今回は何かの理由で、上記のスタイル指定をした場合に「parent」の下とかブラウザの画面最下部とかに隙間ができてしまったという場合を想定して対処法を書いてみます。

まず、横並びにしたい要素「child_l」「child_r」の間にある改行を削除します。

HTML
<div class="parent">

<div class="child_l">これを横並びにします。</div><div class="child_r">これを横並びにします。</div>

</div><!-- .parent -->

display:inline-block;は、ちょっと強引な言い方になってしまいますが、その要素をインライン要素として扱いつつブロック要素みたいに幅や高さを指定できるという、何でもアリかよ的なスタイル指定です。

で、ブロック要素はどんどん下に回り込んでいくわけですが、インライン要素の場合はその名の通り一列に並ぼうとします。

隙間なく並んでくれれば問題ないのですが、ソースコード上でインライン要素とインライン要素の間で改行してしまうと微妙な隙間ができてしまいます。

そのため、「child_l」「child_r」にdisplay:inline-block;を指定してmargin-right:20pxを指定した場合、この微妙な隙間の分だけ親要素「parent」より大きくなってしまうため、横並びにならずに「child_r」が下に回り込んでしまいます。

そうさせないために「child_l」「child_r」の間にある改行を削除するというわけです。

display:inline-block;を指定する

HTML
<div class="parent">

<div class="child_l">これを横並びにします。</div><div class="child_r">これを横並びにします。</div>

</div><!-- .parent -->
CSS
.parent {
	width: 620px;
}

.child_l {
	width: 300px;
	margin-right: 20px;
	display: inline-block;
}
.child_r {
	width: 300px;
	display: inline-block;
}

float:left;を削除し、代わりにdisplay:inline-block;を指定します。

いろいろと書いてしまいましたが、作業自体は

  • 横並びにしたい要素を要素の間の改行を削除
  • float:left;の代わりにdisplay:inline-block;を指定

という2点だけです。

謎の隙間がどうしても消えない･･･！　なんかすごくイライラする･･･！　というときには、試してみて頂ければと思います。

またインライン要素の隙間は改行を削除せずにスタイル指定で消すこともできますので、興味あったらいろいろ調べてみたらいいと思います。