img元素底部為何有空白?

原因是inline元素文字vertical-align屬性基準點預設為baseline導致底部會有一小段留給諸如小寫英文尾巴的空白，消除方法如下:
1、vertical-align: middle;
(設為top或bottom也可，只是上下邊界會略有變化，而和display:block結果不一致)
2、display: block;
3、父元素的font-size: 0;
4、父元素的line-height: 0;

參照:
https://www.zhihu.com/question/21558138