<a><image/></a>時(shí) 多出來(lái)3px的問(wèn)題

大地Dudy,前端工程師 / 全棧開發(fā)工程師

a元素下有一個(gè)匿名文本,這個(gè)文本外有一個(gè)匿名行級(jí)盒子,它有的默認(rèn)vertical-align是baseline的,而且往往因?yàn)樯衔膌ine-height的影響,使它有個(gè)line-height,從而使其有了高度,因?yàn)閎aseline對(duì)齊的原因,這個(gè)匿名盒子就會(huì)下沉,往下?lián)伍_一些距離,所以把a(bǔ)撐高了。

解決辦法一是消除掉匿名盒子的高度,也就是給a設(shè)置line-height:0或font-size:0;
解決辦法二是給兩者vertical-align:top,讓其top對(duì)齊,而不是baseline對(duì)齊
解決辦法三是給img以display:block,讓它和匿名行級(jí)盒子不在一個(gè)布局上下文中,也就不存在行級(jí)盒的對(duì)齊問(wèn)題
其他解決辦法也有,但這些都是從根本上解決問(wèn)題

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 有些東西我們經(jīng)常用,但是我們卻并不了解它的原理,所以一旦換了場(chǎng)景,好多東西就不知道該怎么用了。最近一直很糾結(jié)ver...
    朱小維閱讀 4,995評(píng)論 8 34
  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,796評(píng)論 1 92
  • 前言 總括: 本文通過(guò)實(shí)例講解CSS中最大的難點(diǎn)之一,行內(nèi)元素的布局,主要是挖掘line-height和verti...
    秦至閱讀 1,929評(píng)論 0 1
  • 想休個(gè)長(zhǎng)假,出去走走逛逛,讓勞累的身體得到放松,讓疲憊的心靈獲得寧?kù)o。但想到手頭一大堆焦頭爛額的事情,嘆嘆氣,對(duì)自...
    小考拉俱樂(lè)部閱讀 457評(píng)論 0 1
  • 《邪爵》 〖緣〗 ――星辰神殿,仙氣繚繞,上了年紀(jì)的檀木支柱分別開立在大殿兩側(cè),雕...
    塵尊閱讀 443評(píng)論 3 4