您现在的位置: 365建站网 > 365学习 > div line-height 导致 img 与 div 存在空隙的解决方法

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

文章来源:365jz.com     点击数:72    更新时间:2021-02-01 11:57   参与评论

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


一、问题

1.png

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

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

但是仍旧存在这个问题。


二、问题产生的原因

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

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

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

2.png

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


三、解决


1、display:block

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

3.png

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


2、 vertical-align:bottom;

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

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

4.png


3、 line-height:0;

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

div{
    line-height:0;}

即可

5.png


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让币种垂直居中


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

您可能感兴趣的文章:


发表评论 (72人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------