高さが16px以下の画像を指定の位置に表示させたいのに、余計な隙間ができる。

  • 1
    いいね
  • 1
    コメント

高さが16px以下の画像を指定の位置に表示させたいのに、余計な隙間ができた場合は、

  1. imgをmargin: 0;にする。
  2. divをdisplay: inline;にする。

それでも解決しないときは、

  1. imgをdisplay: block;にする。
  2. divをfont-size: 0; または、vertical-align: top;にする。

inline-blockはその挙動になります。
その次に重要なのが何がblock要素、何かinline-block要素、何がinlineなのかというところになってきます。

HTML5ではその境界がなくなったと言われていますが、それはあくまで新要素であるsection, article、navなどの事でありまだその概念はしっかり残っています。