CSS inline-blockの改行 | idealive tech blog

皆さんこんにちは、r.matsumotoです。

今回はCSSのinline-blockに関する意外な落とし穴について話していこうと思います。

私がこの現象に遭遇したのは、仕事でお客様から頂いたデザインを実際にソースにはめ込んで正しく表示がされているかの確認をしている時の事でした。

displayがinline-blockで設定されているリボンのデザインの間に変な空白が入り、お客様から頂いているデザインと微妙に異なるという現象に遭遇しました。

原因はdisplayがinline-blockになっている要素間の改行にありました。

以下が問題のHTMLとCSSなのですが見てわかるようにinline-blockの要素間に改行が挟まっています。

<div class="ribbon"></div>
<div class="ribbon"></div>

1 2	<div class="ribbon"></div> <div class="ribbon"></div>

.ribbon{
  display:inline-block;
}

.ribbon{

display:inline-block;

}

まさかソースの改行がデザインに影響するとは思いませんでした。

対応策としてはソースの改行を無くすのが一番楽だったのですが、可読性を考慮して空白が出るところにマイナスのmarginをつけることで解決しました。