css - 包裹img的a標簽為什么不和img元素一樣大
問題描述
代碼如下：
<!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.aoyou183.cn/wenda/3516.html#'><img src='http://www.aoyou183.cn/wenda/images/logo.png' alt='logo' /></a></h1></body></html>
當打開F12調(diào)試時，顯示的img元素如下：
我想要問的問題是：1.為什么h1元素是如下所示：(重點解釋為什么高是107.2px，而不是100px，寬是1536是因為瀏覽器的寬度，這個我懂）
2.a元素是如下所示:（重點解釋為什么a元素的區(qū)域沒有包裹住img元素的區(qū)域）
問題解答
回答1：第一個問題的確是因為 img 是 inline，但根源是因為渲染時默認按照西文字體的基線對齊底部，多出來的的高度的多少由 h1 標簽的 font 和 font-size 共同決定，如下圖：
https://en.wikipedia.org/wiki...
所用字體，在當前字號下，紅色部分最長有多長，就是你多出來的那幾像素。所以這其實是個字體排版的問題：西文字體為了顯示 baseline 下面的部分，會按字體自動在底下加上所需的空間，img 被當成行內(nèi)元素排版，一并應用了這個策略。
想看的更清楚一點，你可以把你的 html 修改成這樣：
<h1>gxj<img></h1>
效果：
x 的底部是 baseline 的位置，gj 這類字符超出基線部分的長度就是多出來的高度。
知道原因方法就一堆了:
正經(jīng)的 @cipchk 提的 display:block; 或者設置 img 的 vertical-align 為 baseline 以外的任意選項。個人喜歡后者，沒有影響到 img 的行內(nèi)性質(zhì)。
不正經(jīng)的辦法你可以做一個特別的字體， baseline 在最底下。。。
第二個問題你這種情況下：
a 標簽是 inline non-replaced 元素img 標簽是 inline replaced 元素
對應的 W3C 標準傳送門：
https://www.w3.org/TR/2011/RE...https://www.w3.org/TR/2011/RE...
你想要的樣子：
http://codepen.io/zcfan/pen/Z...
你給的截圖里 a 標簽高度和內(nèi)部 img 不匹配是正常現(xiàn)象，標準對于 inline non-replaced 元素高度的計算就是這樣規(guī)定的。（見上面鏈接）
想要達成前面 codepan 里結(jié)果：
<a> 設置 display: inline-block;（改變 a 標簽高度計算方式）
<img> 設置 vertical-align: bottom;（消除 img 底下額外的高度）
關(guān)于 css 的書好像沒幾本可選的，就《CSS權(quán)威指南（第3版）》感覺還不錯（只是翻過，不保證）。如果專攻頁面重構(gòu)有必要去通讀下來。有能力讀文檔最好，省本書錢還省了被翻譯坑的可能。
網(wǎng)絡上 css 的教程見過最好的是這個：http://book.mixu.net/css/sing...
都是字典一樣的東西，不生動不形象也沒趣味，沒辦法，生啃吧。。。
回答2：因為 img 默認是內(nèi)聯(lián)，然后 line-height 行高會影響到行框的布局。
簡單的解決可以把行高去掉：
/* 方法一 */h1 { line-height: 0; }
但是，行高又是字號 font-size 一起才會生效，所以：
/* 方法二 */h1 { font-size: 0; }
可，如果內(nèi)部是個塊級元素，也是可以的：
/* 方法三 */img { display:block; }
客官，您高興用哪一個都行。
回答3：img { vertical-align: middle; border: 0; outline: 0;}
CSS初始化不是都會有這句么- -
回答4：https://www.zhihu.com/questio... 里面有詳細解釋，我一般是初始化的時候img{vertical-align：top}
相關(guān)文章：
1. javascript - vue 移動端的input 數(shù)字輸入優(yōu)化2. java - mongodb分片集群下，count和聚合統(tǒng)計問題3. java - 自己制作一個視頻播放器，遇到問題，用的是內(nèi)置surfaceview類，具體看代碼！4. android - java 泛型不支持數(shù)組，那么RxJava的Map集合有什么方便的手段可以定義獲得一串共同父類集合數(shù)據(jù)呢？5. 服務器端 - 采用nginx做web服務器，C++開發(fā)應用程序 出現(xiàn)拒絕連接請求？6. 為什么我ping不通我的docker容器呢？？？7. 關(guān)于docker下的nginx壓力測試8. python - pandas按照列A和列B分組，將列C求平均數(shù)，怎樣才能生成一個列A,B,C的dataframe9. javascript - 有什么兼容性比較好的辦法來判斷瀏覽器窗口的類型？10. java - 靜態(tài)屬性中的賦值和靜態(tài)代碼塊中的賦值有什么區(qū)別？
網(wǎng)公網(wǎng)安備