img 图像底部留白的原因以及解决方法

Posted 2021-12-28 zsp-1064239893

      有时候，我们在添加图片img标签后并没有给该标签设置magrin属性的margin-bottom值，在有些浏览器中打开就会出现图像底部留白，为什么为造成这个原因？下面就来进行分析：由于img元素默认为inline元素，而inline元素的vertical-align属性的默认值为baseline文字基线对齐，正好图片底部的留白就是baseline和bottom之间的距离。最后就给大家分享一下针对该问题的解决方法。

1.把图片设置为块级元素

    我们都知道图片img标签默认为内联（inline）元素，把img标签设置为块元素就可以解决底部留白问题。

    如：imgdisplay:block;

2.设置图片的垂直对齐方式

      相信很多小伙伴对vertical-align这个属性有种很模糊的概念，和text-align属性作用的对象易混淆：首先text-align是设置或检索对象中文本的对齐方式（左、中、右）；vertical-align则是用于指定元素（inline元素）的上下垂直对齐方式（顶部、中间、底部、基线）。再回到刚刚这个问题，我们通过给图片添加垂直对齐方式来解决底部留白。

    如： imgvertical-align:top   (vertical-align值根据具体情况来规定：top、middle、botom)

3.设置父元素的文字大小为0

    如：img的父元素为div，那么只需要给div添加一个font-size属性并设置值为0即可。但是此方法会让父元素div中的其他子元素继承font-size属性，导致文字无法显示，这样就会出现一些隐性错误，那么再针对性的给需要的子元素单独添加font-size属性。

4.给父元素添加overflow属性

    如果父元素规定了固定的宽高，图片大小就会跟随父元素而定，则可以给父元素添加overflow属性：overflow:hidden ;

5.设置图片的浮动或者定位属性

    给图片设置浮动（float）或者定位（position）属性也能够解决地不留白问题，原理和方法一类似，就是通过添加 float  或 position 属性来改变display属性，被隐式变为块级元素了。

     注：使用浮动的话最后要清除浮动

6.取消图片标签和其父元素之间的空格

    由于浏览器会解析空格，故可以通过消除空格来解决问题，但是这个方法我们一般推荐，因为这样会使页面代码更加混乱，排版不清晰