去掉div下的img底部的縫隙

緣由

• 去掉圖片底部的空白間隙：img先後有空格，而該空格的line-height有默認值，img元素的vertical-align的默認值爲baseline，也就是基線對齊，img的底部對齊文字的底部

解決方案有

1. 讓img的vertical-align失效，vertical-align只對block塊級元素無效，設置img的display爲block
2. 讓img的vertical-align選其餘值，例如top,bottom,middle
3. 直接修改外層div的line-height，讓其值小於空格的默認line-height
4. 設置外層div的font-size爲0

知識點

1. vertical-align的百分比是相對line-height,例如line-height爲20px，vertical-align爲10%，則最終計算vertical-align爲20*10%=2px
2. vertical-align屬性只會在inline-block水平的元素上期做用，可是其影響到的元素涉及到inline屬性的元素，這裏千萬記住，inline水平元素受vertical-align屬性而位置改變等不是由於其對vertical-align屬性敏感或起做用，而是受制於整個line box的變化 而不得不變化的

詳情見張大佬的博客