div line-height 导致 img 与 div 存在空隙的解决方法

一、问题

像是上面这个图，就很明显的问题，图片放在div中，但是下方会出现一个白框。虽然图片使用的是

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

但是仍旧存在这个问题。

二、问题产生的原因

最直接的原因就是 img 是行内元素，而其vertical-align方式默认是 baseline

div本身是有line-height的，baseline对其方式导致图片并不是与div的真实底部对其，而是文基线。

所谓的基线底部不包括 line-height 的空白显示部分

基线对齐导致图片总是和div下边缘有一段空隙，而 line-height 同样表现在行内元素的 img 上，因此即使没有文字，图片也存在一个 line-height 的影响。

三、解决

1、display:block

最直接的办法肯定是将 img 作为 block 来处理,就不存在line-height的影响了。

但是将 img 作为 block 处理，会导致文字换行，因此这个方式有些时候并不适用，如果只有图片的话， 那就可以直接来设置。

2、 vertical-align:bottom;

既然是因为 vertical-align:baseline 存在问题，那将其改变，不适用默认对其。

底部对其可以直接使用 vertical-align:bottom

3、 line-height:0;

上面提到div的line-height会影响行内元素，因此，如果需要将图片和文字都基于底部对其，则使用

div{
    line-height:0;}

即可

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

我要实现下图的样子,币种和旗子都是垂直居中,方法很简单,给img设置vertical-align:middle.在父容器上设置上line-height,效果如下

要实现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>

解释一下这么写的原因:

img是行内元素,会带有默认样式vertical-align:baseline

vertical-align是指定行内元素(inline)垂直对齐方式的(目前只有图片支持vertical-align属性,默认属性值是baseline,所以会导致图片产生一个3px左右的下边距,解决方法就是给vertical-align设置非baseline的内容)

官网解释vertical-align:baseline,使元素的基线与父元素的基线对齐;

父元素的基线,实际上解释的比较模糊,我的理解是父元素基线在父容器底部附近,但是还没有完全到底;

我理解的:设置baseline的元素会影响周边行内元素,让baseline元素和周边元素都处于容器底部偏上一点点的基线位置

所以会出现这种情况,币种位于底部,即使设置了line-height也无法是币种垂直居中

解决方法:给旗子设置vertical-align:middle让旗子垂直居中,然后给父容器设置line-height让币种垂直居中

• line-height