<a>標籤裡面直接巢狀圖片，<img>下面出現一小段空白的原因
阿新 • • 發佈：2019-01-12
今天在寫頁面時，發現在a標籤，裡面嵌入<img>底部會出現空白的問題！
請看示例程式碼：
1 <a style="border: 2px dashed blue">
2 <img src="images/module/zright2.jpg" alt="圖片">
3 </a>
請看示例效果圖：
現在出現了兩個問題，首先a標籤，沒有因為img的大小而被撐大，然後是a的內部下面出現空白。
1、首先，<a>標籤是inline的，框模型是：行內框。行內框沒有包含圖片的表現，<img>的標籤就好像放在一條公路上一樣。所以要使img能像放進一個盒子一樣，就應該使用塊級框：比如：
display:block;
/*或者*/
display:inline-block;
關於框模型！推薦你去看看css的官方http://www.w3.org/TR/CSS2/或者網上很多文章都有！
2、<img>標籤為什麼會有底下的空白呢？這你要理解所謂的“基線(baseline)”。這是一個英文排版概念。我這裡還是引用下知乎人的連結吧！http://www.zhihu.com/question/21558138 講得很周到！
3、總結這個問題的幾種解法：
A、處理基線
a{display:block;}
img{vertical-align:bottom;}
B、強行去掉<a>標籤的行高
a{display:block;line-height:0px;}
C、沒有設定行高的時候可以去掉字型大小
a{display:block;font-size:0px;}
文章乃參考、轉載其他部落格所得，僅供自己學習作筆記使用！！！