More than 5 years have passed since last update.

インライン要素で謎の隙間が出てくる問題

Last updated at 2015-08-12Posted at 2015-08-04

<div class="hoge">
	<div class="fuga"></div>
	<div class="fuga"></div>
	<div class="fuga"></div>
</div>

.fuga{
	display:inline-block;
	margin:0px;
}

とかやっても何故か謎の隙間が出来てします。
float:leftとかにするのも手ですが、heightをしっかり出したいときにfloatは使えません。

http://qiita.com/chitoku
chitokuさん指摘事項追記
　
ここで生じている隙間は HTML 上のスペースによるものです。

<div class="hoge">
    <div class="fuga"></div><div class="fuga"></div><div class="fuga"></div>
</div>

のように詰めてしまうか

<div class="hoge">
    <div class="fuga"></div><!--
 --><div class="fuga"></div><!--
 --><div class="fuga"></div>
</div>

のようにコメントアウトする方法がよく取られます。
(chitokuさん指摘ありがとうございました！)

HTMLを上記のように編集出来ない場合はCSSで親要素のfont-sizeを0にして目的のクラスでfont-sizeを設定すると、隙間がなくなります。

.hoge{
	font-size:0;
}
.fuga{
	font-size:20px;
	display:inline-block;
}

めでたしめでたし