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

2014.05.14 HTML/CSS
floatで下に謎の隙間が空いちゃうときはdisplay:inline-blockを使うときっと幸せ

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

そういうときには疑わしい要素をコメントアウトしながら原因を絞り込んでいくわけですが、たまにどうしても隙間が消えてくれないときがあるかと思います。こういった場合、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点だけです。謎の隙間がどうしても消えない・・・! なんかすごくイライラする・・・! というときには、試してみて頂ければと思います。またインライン要素の隙間は改行を削除せずにスタイル指定で消すこともできますので、興味あったらいろいろ調べてみたらいいと思います。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら