CSS 解決img底部空白間隙

參考鏈接：https://www.jianshu.com/p/e7373c2bbef1

前言

img一直以來有一個很大的問題就是底部空白間隙，一直以為是img默認樣式造成的，后來查了相關的資料，才弄清楚為什么會產生這樣的結果。

首先仔細看下圖中的邊框與img的間隙。

 

 

img間隙

用過ps文字工具的同學頭知道，在使用文本工具中會出現如下的現象，字母或者漢字會超出那條基線。

 

 

PS文字工具

而在CSS中也有那條線，而且inline默認的垂直對齊方式vertical-align默認值是baseline(基線對齊)，也是以x字母的下方為基准。（在平面設計中，字體設計也同樣基於這樣的一個原則，x的下方為基線）

 

 

基線問題

觀察上方的代碼，字體的大小直接影響着超出基線間隙，所以字體大小可以影響基線間隙。
同時行內本身的line-height是會移動基線的（文字垂直居中可以通過line-height實現）。所以行高也是可以影響基線的位置。

 

解決方案

知道底部間隙的原因是因為行內元素默認的垂直對齊方式為baseline造成的字體下方會有間隙，所以解決起來就挺好辦了。一切的原因都是inline行內屬性在作怪，只要對症下葯即可。

目前有4種非常簡單的解決方案。

第一種方法：修改img行內元素的垂直居中方式，讓它不在以基線對齊。

img { vertical-align: bottom; } 

效果如下：

 

最終效果

第二種方法：修改行高，使行高變小，這樣基線下方的位置基本可以忽略。

div { line-height: 0px; } 

效果如下：

 

最終效果

第三種方法：修改img行內元素的字體大小，基線的下方間隙是部分字體超過基線下方而產生的，如果把父元素的font-size變的超小，基線的下方距離將忽略不計。

div { font-size: 0px; } 

效果如下：

 

 

最終效果

如果把字體改的非常大，那么間隙又會出現。

div { font-size: 80px; } 

效果如下：

 

 

最終效果

第四種方法：直接讓img變成塊級元素，不在受行內基線的影響。

img { display: block; } /* 浮動也可以讓元素變成塊級 */ img { float：left; } /* 只要能變成塊級的屬性都可以 */ ... 

效果如下：

 

最終效果

結語

在深入研究img間隙原因之前，我一直使用的是display: block來控制間隙，在深入學習之后，才發現有這么多方式可以解決，懂得原理很重要。所以學習一定要知其所以然。