inline-blockを指定した要素に隙間が空く理由

連続した要素にinline-blockを指定すると、隙間が空く現象。

インラインブロックの隙間

インラインブロックを指定するということは、img要素と同じ表示になるということです。
すなわち、img要素でも、同じ現象が見られます。

imgも隙間がある

これらのhtmlは以下のようになっています。

<ul class="listinline-block">
<li>ディーシーエスWEBスクール</li>
<li>ディーシーエス建築写真</li>
<li>ディーシーエスHP制作</li>
<li>ディーシーエスチラシ制作</li>
</ul>

<div class="imgyoko">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>

何か気づきませんか?
じつは見えない改行があるんですね。

<ul class="listinline-block">
<li>ディーシーエスWEBスクール</li> ← 改行してる
<li>ディーシーエス建築写真</li> ← 改行してる

この改行が半角スペース分として、隙間が空いてしまうのです。
なので、このように連続して書くことで、隙間をなくすことができます。

<ul class="listinline-block">
<li>ディーシーエスWEBスクール</li><li>ディーシーエス建築写真</li><li>ディーシーエスHP制作</li><li>ディーシーエスチラシ制作</li>
</ul>

<div class="imgyoko">
<img src="" /><img src="" /><img src="" /><img src="" />
</div>

インラインブロックの隙間2

でもまだちょっとガタガタしていますね。
これはimgのcssの仕様で、img要素の位置が、テキストのベースラインに揃えて表示されるからです。
cssでvertical-align:bottom;を指定することで、ベースラインの下に揃いますので、ガタガタがなくなります。

ul.listinline-block li{
display:inline-block;
width:100px;
height:100px;
border:solid 1px #000000;
vertical-align:bottom;
}


div.imgyoko img{
width:100px;
height:100px;
vertical-align:bottom;
}

インラインブロックの隙間とバーティカルアライン

img要素もちゃんと隙間無くキレイに並びました。
imgも並んだ

:メモ:ベースラインとは
img要素ののvertical-alignは標準でbaselineになっています。
適用した親要素(imgはpで囲うのがルールなので、pが親ですね。)
のベースラインにあわせるということです。
英語を書くノートを思い出してください。
のgやjなど、文字の一番したがラインからはみ出ますよね。
日本語ではそんなことはないのですが、あの線がベースラインです。
ベースライン

imgの位置を揃える基準を、cssで下端揃えにしてあげることで、

img{
vertical-align:bottom;
}

バーティカルアライン隙間なくなる

imgはベースラインの下の端に揃う形になるため、
隙間がなくなるように見えます。

しかしこれはあくまで揃う位置を合わせるだけのものなので、
隙間を消すためのものと覚えると迷路に迷い込みます。
inline-blockにvertical-alignを効かせても、
隙間が消えるわけではないので注意してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>