html - css布局問題，在firebug下<a>標簽嵌入<img>標簽但是高度<a>總比<img>多4個像素

問題描述

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-size

a { 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的高度多出來?？梢栽O置img 為塊級元素，也可以設置對齊方式為bottom 解決這個問題