css - 包裹img的a標(biāo)簽為什么不和img元素一樣大
問(wèn)題描述
代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style> body,h1{ padding:0; margin:0; font-family:arial; } img { border:none; } a {text-decoration:none; } body{background-color: #aaa; } </style></head><body> <!--img的大小為寬238px，高100px--> <h1><a href='http://www.cgvv.com.cn/wenda/3516.html#'><img src='http://www.cgvv.com.cn/wenda/images/logo.png' alt='logo' /></a></h1></body></html>
當(dāng)打開(kāi)F12調(diào)試時(shí)，顯示的img元素如下：
我想要問(wèn)的問(wèn)題是：1.為什么h1元素是如下所示：(重點(diǎn)解釋為什么高是107.2px，而不是100px，寬是1536是因?yàn)闉g覽器的寬度，這個(gè)我懂）
2.a元素是如下所示:（重點(diǎn)解釋為什么a元素的區(qū)域沒(méi)有包裹住img元素的區(qū)域）
問(wèn)題解答
回答1：第一個(gè)問(wèn)題的確是因?yàn)?img 是 inline，但根源是因?yàn)殇秩緯r(shí)默認(rèn)按照西文字體的基線對(duì)齊底部，多出來(lái)的的高度的多少由 h1 標(biāo)簽的 font 和 font-size 共同決定，如下圖：
https://en.wikipedia.org/wiki...
所用字體，在當(dāng)前字號(hào)下，紅色部分最長(zhǎng)有多長(zhǎng)，就是你多出來(lái)的那幾像素。所以這其實(shí)是個(gè)字體排版的問(wèn)題：西文字體為了顯示 baseline 下面的部分，會(huì)按字體自動(dòng)在底下加上所需的空間，img 被當(dāng)成行內(nèi)元素排版，一并應(yīng)用了這個(gè)策略。
想看的更清楚一點(diǎn)，你可以把你的 html 修改成這樣：
<h1>gxj<img></h1>
效果：
x 的底部是 baseline 的位置，gj 這類字符超出基線部分的長(zhǎng)度就是多出來(lái)的高度。
知道原因方法就一堆了:
正經(jīng)的 @cipchk 提的 display:block; 或者設(shè)置 img 的 vertical-align 為 baseline 以外的任意選項(xiàng)。個(gè)人喜歡后者，沒(méi)有影響到 img 的行內(nèi)性質(zhì)。
不正經(jīng)的辦法你可以做一個(gè)特別的字體， baseline 在最底下。。。
第二個(gè)問(wèn)題你這種情況下：
a 標(biāo)簽是 inline non-replaced 元素img 標(biāo)簽是 inline replaced 元素
對(duì)應(yīng)的 W3C 標(biāo)準(zhǔn)傳送門(mén)：
https://www.w3.org/TR/2011/RE...https://www.w3.org/TR/2011/RE...
你想要的樣子：
http://codepen.io/zcfan/pen/Z...
你給的截圖里 a 標(biāo)簽高度和內(nèi)部 img 不匹配是正常現(xiàn)象，標(biāo)準(zhǔn)對(duì)于 inline non-replaced 元素高度的計(jì)算就是這樣規(guī)定的。（見(jiàn)上面鏈接）
想要達(dá)成前面 codepan 里結(jié)果：
<a> 設(shè)置 display: inline-block;（改變 a 標(biāo)簽高度計(jì)算方式）
<img> 設(shè)置 vertical-align: bottom;（消除 img 底下額外的高度）
關(guān)于 css 的書(shū)好像沒(méi)幾本可選的，就《CSS權(quán)威指南（第3版）》感覺(jué)還不錯(cuò)（只是翻過(guò)，不保證）。如果專攻頁(yè)面重構(gòu)有必要去通讀下來(lái)。有能力讀文檔最好，省本書(shū)錢(qián)還省了被翻譯坑的可能。
網(wǎng)絡(luò)上 css 的教程見(jiàn)過(guò)最好的是這個(gè)：http://book.mixu.net/css/sing...
都是字典一樣的東西，不生動(dòng)不形象也沒(méi)趣味，沒(méi)辦法，生啃吧。。。
回答2：因?yàn)?img 默認(rèn)是內(nèi)聯(lián)，然后 line-height 行高會(huì)影響到行框的布局。
簡(jiǎn)單的解決可以把行高去掉：
/* 方法一 */h1 { line-height: 0; }
但是，行高又是字號(hào) font-size 一起才會(huì)生效，所以：
/* 方法二 */h1 { font-size: 0; }
可，如果內(nèi)部是個(gè)塊級(jí)元素，也是可以的：
/* 方法三 */img { display:block; }
客官，您高興用哪一個(gè)都行。
回答3：img { vertical-align: middle; border: 0; outline: 0;}
CSS初始化不是都會(huì)有這句么- -
回答4：https://www.zhihu.com/questio... 里面有詳細(xì)解釋，我一般是初始化的時(shí)候img{vertical-align：top}
相關(guān)文章：
1. 為什么我ping不通我的docker容器呢？？？2. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.3. 將SQLServer數(shù)據(jù)同步到MySQL 用什么方法？4. android - webview 自定義加載進(jìn)度條5. 并發(fā)模型 - python將進(jìn)程池放在裝飾器里為什么不生效也沒(méi)報(bào)錯(cuò)6. numpy - python [:,2][:,None]是什么意思7. javascript - 微信小程序限制加載個(gè)數(shù)8. javascript - 微信小程序封裝定位問(wèn)題（封裝異步并可能多次請(qǐng)求）9. javascript - 微信音樂(lè)分享10. python 怎樣用pickle保存類的實(shí)例？
網(wǎng)公網(wǎng)安備