今天在寫頁面時，發現在a標簽，裡面嵌入<img>底部會出現空白的問題！ 請看示例代碼： 請看示例效果圖： 現在出現了兩個問題，首先a標簽，沒有因為img的大小而被撐大，然後是a的內部下麵出現空白。 1、首先，<a>標簽是inline的，框模型是：行內框。行內框沒有包含圖片的表現，<img>的標簽就好 ...
今天在寫頁面時，發現在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;}
文章乃參考、轉載其他博客所得，僅供自己學習作筆記使用！！！
