問題描述

demo參考:http://huzerui.com問題：Firebug下a標(biāo)簽嵌入img標(biāo)簽，但是高度a標(biāo)簽始終比img標(biāo)簽多4個(gè)像素，a不是適應(yīng)img的高度嗎，這個(gè)4px怎么來的，可以去除嗎？如圖：一開始以為是默認(rèn)樣式有問題，添加了

*{ margin:0; padding:0;}

測試后沒有用 然后就刪了

<p> <a><img> </a></p>

三個(gè)標(biāo)簽都沒有高度 ，demo中p和a適應(yīng)img的高度，定義了img為max-width:100%;

問題解答

轉(zhuǎn)自：http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

這是 line-height 和 vertical-align 造成的，被稱為幽靈空白節(jié)點(diǎn)，解決方案有以下幾種：

讓 vertical-align 失效

img { display: block; }

vertical-align 默認(rèn)為 baseline，更改為其他即可

img { vertical-align:middle; }

直接修改 line-height 值

a { line-height: 5px; }

修改 font-size

a { font-size: 0; }

a標(biāo)簽加個(gè)樣式 font-size=0px

給你個(gè)方案 ，img{vertical-align:bottom},原因是這樣的，圖片是默認(rèn) 靠 基線對其的，其實(shí)整個(gè)高度你不能理解為是靠 img的高度撐起來的，你應(yīng)該理解為是靠 line-hieght撐起來的。具體內(nèi)容看上樓~ 沒事多看點(diǎn)大牛的博客！不采納麻煩也點(diǎn)個(gè)贊呀~

a元素是一個(gè)行內(nèi)元素

img是一個(gè)行內(nèi)替換元素

img元素的高度會(huì)影響其所在行內(nèi)元素的的行高

行內(nèi)元素在垂直方向上默認(rèn)以baseline的方式的對齊。如果行內(nèi)元素沒有baseline，例如img元素，那么這個(gè)元素的底端就可父元素的baseline對齊5.a元素直接放入一個(gè)img元素，看起來沒有文本，實(shí)際上瀏覽器在渲染的時(shí)候，會(huì)認(rèn)為a元素放了一個(gè)空白的字符而構(gòu)成一個(gè)對齊baseline

Img 默認(rèn)是基線對齊，底部會(huì)有0.25em的高度多出來。可以設(shè)置img 為塊級元素，也可以設(shè)置對齊方式為bottom 解決這個(gè)問題