div line-height 導(dǎo)致 img 與 div 存在空隙的解決方法

一、問(wèn)題

像是上面這個(gè)圖，就很明顯的問(wèn)題，圖片放在div中，但是下方會(huì)出現(xiàn)一個(gè)白框。雖然圖片使用的是

img{
    width:100%;
    height:100%;}

但是仍舊存在這個(gè)問(wèn)題。

二、問(wèn)題產(chǎn)生的原因

最直接的原因就是 img 是行內(nèi)元素，而其vertical-align方式默認(rèn)是 baseline

div本身是有l(wèi)ine-height的，baseline對(duì)其方式導(dǎo)致圖片并不是與div的真實(shí)底部對(duì)其，而是文基線。

所謂的基線底部不包括 line-height 的空白顯示部分

基線對(duì)齊導(dǎo)致圖片總是和div下邊緣有一段空隙，而 line-height 同樣表現(xiàn)在行內(nèi)元素的 img 上，因此即使沒(méi)有文字，圖片也存在一個(gè) line-height 的影響。

三、解決

1、display:block

最直接的辦法肯定是將 img 作為 block 來(lái)處理,就不存在line-height的影響了。

但是將 img 作為 block 處理，會(huì)導(dǎo)致文字換行，因此這個(gè)方式有些時(shí)候并不適用，如果只有圖片的話， 那就可以直接來(lái)設(shè)置。

2、 vertical-align:bottom;

既然是因?yàn)?nbsp;vertical-align:baseline 存在問(wèn)題，那將其改變，不適用默認(rèn)對(duì)其。

底部對(duì)其可以直接使用 vertical-align:bottom

3、 line-height:0;

上面提到div的line-height會(huì)影響行內(nèi)元素，因此，如果需要將圖片和文字都基于底部對(duì)其，則使用

div{
    line-height:0;}

即可

css設(shè)置span和img垂直居中(設(shè)置line-height失效)：

我要實(shí)現(xiàn)下圖的樣子,幣種和旗子都是垂直居中,方法很簡(jiǎn)單,給img設(shè)置vertical-align:middle.在父容器上設(shè)置上line-height,效果如下

要實(shí)現(xiàn)span垂直居中,代碼如下:

<style>
     .flag{
          position: absolute;
          bottom: 0;
          width: 23rem;
          height: 2.5rem;
          line-height: 2.5rem;
      }
      .flag img{
          width: 1.58rem;
          height: 2.1rem;
          vertical-align: middle;
      }
</style>


<div class="flag">
       <img src="./img/flag.png">              
       <span>幣種:...</span>
</div>

解釋一下這么寫(xiě)的原因:

img是行內(nèi)元素,會(huì)帶有默認(rèn)樣式vertical-align:baseline

vertical-align是指定行內(nèi)元素(inline)垂直對(duì)齊方式的(目前只有圖片支持vertical-align屬性,默認(rèn)屬性值是baseline,所以會(huì)導(dǎo)致圖片產(chǎn)生一個(gè)3px左右的下邊距,解決方法就是給vertical-align設(shè)置非baseline的內(nèi)容)

官網(wǎng)解釋vertical-align:baseline,使元素的基線與父元素的基線對(duì)齊;

父元素的基線,實(shí)際上解釋的比較模糊,我的理解是父元素基線在父容器底部附近,但是還沒(méi)有完全到底;

我理解的:設(shè)置baseline的元素會(huì)影響周邊行內(nèi)元素,讓baseline元素和周邊元素都處于容器底部偏上一點(diǎn)點(diǎn)的基線位置

所以會(huì)出現(xiàn)這種情況,幣種位于底部,即使設(shè)置了line-height也無(wú)法是幣種垂直居中

解決方法:給旗子設(shè)置vertical-align:middle讓旗子垂直居中,然后給父容器設(shè)置line-height讓幣種垂直居中

• line-height