a標(biāo)簽70px

img標(biāo)簽放在了a標(biāo)簽(inline模型)內(nèi)部，由于inline不是用來(lái)包含內(nèi)容的，因此這需要將a標(biāo)簽display改為inline-block或者block

img標(biāo)簽60px

但是僅僅改變display并不能解決問(wèn)題，因?yàn)閕mg在a中垂直對(duì)齊方式也就是vertical-align默認(rèn)值為baseline，所以img最垂直對(duì)齊時(shí)是按照a的基線對(duì)齊而不是底線

該問(wèn)題產(chǎn)生的關(guān)鍵就是垂直對(duì)齊方式，基線與底線間存在空白，如何消除空白

解決辦法

1.a{ display:inline-block或者block; line-height:0px或者font-size:0; }

注：line-height的值默認(rèn)是按照f(shuō)ont-size的值乘以一定比例計(jì)算得來(lái)

line-height設(shè)置為0時(shí)，基線與底線間距離為0，空白消除

2.img{ vertical-align:bottom }

對(duì)齊方式設(shè)為底線，而不以基線對(duì)齊，也消除了空白