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.lshqa.cn/wenda/3516.html#'><img src='http://www.lshqa.cn/wenda/images/logo.png' alt='logo' /></a></h1></body></html>
當打開F12調試時，顯示的img元素如下：
我想要問的問題是：1.為什么h1元素是如下所示：(重點解釋為什么高是107.2px，而不是100px，寬是1536是因為瀏覽器的寬度，這個我懂）
2.a元素是如下所示:（重點解釋為什么a元素的區域沒有包裹住img元素的區域）
問題解答
回答1：第一個問題的確是因為 img 是 inline，但根源是因為渲染時默認按照西文字體的基線對齊底部，多出來的的高度的多少由 h1 標簽的 font 和 font-size 共同決定，如下圖：
https://en.wikipedia.org/wiki...
所用字體，在當前字號下，紅色部分最長有多長，就是你多出來的那幾像素。所以這其實是個字體排版的問題：西文字體為了顯示 baseline 下面的部分，會按字體自動在底下加上所需的空間，img 被當成行內元素排版，一并應用了這個策略。
想看的更清楚一點，你可以把你的 html 修改成這樣：
<h1>gxj<img></h1>
效果：
x 的底部是 baseline 的位置，gj 這類字符超出基線部分的長度就是多出來的高度。
知道原因方法就一堆了:
正經的 @cipchk 提的 display:block; 或者設置 img 的 vertical-align 為 baseline 以外的任意選項。個人喜歡后者，沒有影響到 img 的行內性質。
不正經的辦法你可以做一個特別的字體， 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 標簽高度和內部 img 不匹配是正常現象，標準對于 inline non-replaced 元素高度的計算就是這樣規定的。（見上面鏈接）
想要達成前面 codepan 里結果：
<a> 設置 display: inline-block;（改變 a 標簽高度計算方式）
<img> 設置 vertical-align: bottom;（消除 img 底下額外的高度）
關于 css 的書好像沒幾本可選的，就《CSS權威指南（第3版）》感覺還不錯（只是翻過，不保證）。如果專攻頁面重構有必要去通讀下來。有能力讀文檔最好，省本書錢還省了被翻譯坑的可能。
網絡上 css 的教程見過最好的是這個：http://book.mixu.net/css/sing...
都是字典一樣的東西，不生動不形象也沒趣味，沒辦法，生啃吧。。。
回答2：因為 img 默認是內聯，然后 line-height 行高會影響到行框的布局。
簡單的解決可以把行高去掉：
/* 方法一 */h1 { line-height: 0; }
但是，行高又是字號 font-size 一起才會生效，所以：
/* 方法二 */h1 { font-size: 0; }
可，如果內部是個塊級元素，也是可以的：
/* 方法三 */img { display:block; }
客官，您高興用哪一個都行。
回答3：img { vertical-align: middle; border: 0; outline: 0;}
CSS初始化不是都會有這句么- -
回答4：https://www.zhihu.com/questio... 里面有詳細解釋，我一般是初始化的時候img{vertical-align：top}
相關文章：
網公網安備