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://m.piao2010.com/wenda/3516.html#'><img src='http://m.piao2010.com/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)傳送門：
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 的書好像沒(méi)幾本可選的，就《CSS權(quán)威指南（第3版）》感覺(jué)還不錯(cuò)（只是翻過(guò)，不保證）。如果專攻頁(yè)面重構(gòu)有必要去通讀下來(lái)。有能力讀文檔最好，省本書錢還省了被翻譯坑的可能。
網(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. linux - 編譯時(shí)提示頭文件#include <mysql/mysql.h>不存在,百度之后也沒(méi)解決2. java - yuicompressor-maven-plugin 合并可用卻不壓縮, 哪配置不對(duì)？3. paramiko - Python tempfile生成的文件能不能拷貝到遠(yuǎn)程服務(wù)器？4. html - 內(nèi)嵌app 的web 頁(yè)面如何應(yīng)用 app 內(nèi)置的靜態(tài)文件5. javascript - 這段stylus只有前兩行有效6. css - 在body里使用 -webkit-overflow-scrolling: touch;無(wú)效7. PHP類中的$this8. html頁(yè)面中怎么將兩個(gè)點(diǎn)之間的距離用直線連接起來(lái)？9. html5 - 使用echarts中的圖表 一個(gè)頁(yè)面導(dǎo)入了好幾個(gè)js圖表 實(shí)現(xiàn)echarts圖表隨著瀏覽器窗口變化而變化時(shí)出現(xiàn)了問(wèn)題10. node.js - 微信小程序有自己的ws協(xié)議，用nodejs的話，還需要nginx干嘛呢
網(wǎng)公網(wǎng)安備