demo参考:http://huzerui.com
问题：
Firebug下a标签嵌入img标签，但是高度a标签始终比img标签多4个像素，a不是适应img的高度吗，这个4px怎么来的，可以去除吗？
如图：
一开始以为是默认样式有问题，添加了
*{
margin:0;
padding:0;
}
测试后没有用 然后就删了
<p>
<a>
<img>
</a>
</p>三个标签都没有高度 ，demo中p和a适应img的高度，定义了img为max-width:100%;
轉自：http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
這是
line-height和vertical-align造成的，被稱為幽靈空白節點，解決方案有以下幾種：讓
vertical-align失效img { display: block; }vertical-align預設為baseline，改為其他即可img { vertical-align:middle; }直接修改
line-height值a { line-height: 5px; }修改
font-sizea { font-size: 0; }a標籤加個樣式 font-size=0px
給你一個方案，img{vertical-align:bottom},原因是這樣的，圖片是默認靠基線對其的，其實整個高度你不能理解為是靠img的高度撐起來的，你應該理解為是靠line-hieght撐起來的。具體內容看上樓~ 沒事多看點大牛的部落格！不採納麻煩也點贊呀~
a元素是一個行內元素
img是一個行內替換元素
img元素的高度會影響其所在行內元素的行高
行內元素在垂直方向上預設以baseline的方式的對齊。如果行內元素沒有baseline，例如img元素，那麼這個元素的底端就可父元素的baseline對齊
5.a元素直接放入一個img元素，看起來沒有文本，實際上瀏覽器在渲染的時候，會認為a元素放了一個空白的字元而構成一個對齊baseline
Img 預設是基線對齊，底部會有0.25em的高度多出來。可以設定img 為區塊級元素，也可以設定對齊方式為bottom 解決這個問題