关于图片底部3像素留白问题的解决方案

操作步骤如下:
1.首先设置一个蓝盒子和红盒子,在蓝盒子添加一张图片,由于没有给蓝盒子设置高度,所以由图片的高度撑开。
2.本来应该是,图片与红盒子应该是无缝连接的。但是在浏览器打开,他俩中间有一条大约3px的像素。

解决方案:
方法一:行内块元素默认基线对齐(baseline),所以,值只要不是基线就可以
注意:当使用弹性盒子的时候(display:flex),此条失效

方法二:只有像input和img这俩个行内块元素才会产生底部3像素,所以将其转化成块级元素,此问题就不存在了

方法三:只要给img标签的父元素添加即可

方法四:此方法可以解决底部3像素的问题,但是会产生新的问题:就是下边的盒子会被上边的盒子给遮起来

方法五:
解释:因为外层的盒子是一个块级元素(eg:p,div,li等),所以div中的东西是有默认行高的
注意:如果外层的盒子是个行内元素(eg:a)此条就不起作用了

处理之后的结果:

补充:

底部3像素产生的原因:由于基线对齐(基线就是字母a,z,x这些字母的最底下的线),产生3像素的原因是由于(像字母g,y下边导致的--写在英语格的第三个格里的部分导致的),所以说3像素,有点不准确,大小会随着文字的变化而变化

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复