欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

div里嵌套了img底部会有白块问题和图片一像素问题解决_html/css_WEB-ITnose

程序员文章站 2022-04-08 20:54:32
...
div里嵌套了img底部会有白块

因为img默认是按基线(baseline)对齐的。对比一下图片和右边的p, q, y等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。

解决方案:一:vertical-align: bottom(推荐)

解决方案:二:display:block;(不推荐)

不推荐原因:因为img在浏览器里的默认样式是inline,除非有特别的需要否则还是不改变盒模型为好,在这个问题中本质还是行内元素的纵向对齐问题,可以给img调整vertical-align来解决,本题中用bottom就行了

扩展:什么是基线?

基线就是我们小时候用的英语本中,中间的第三条线就是基线;

第一条线是:上升高度(帽高度)

第二条线是:中值高度

第四条线是:下降高度

解读:ascent 上升 mean line 平均线 descent 下降

html img 图片上方产生1像素px间隙解决

方案一:通过css对图片加一个浮动元素,比如.divcss5 img{ float:left}

方案二:将图片高度处理为单数(1、3、5、7单数),比如图片本身为200px高度,为了解决我们将图片PS处理成201px或199px高度。图片本身高度为202px双数在IE6和IE7浏览器中就会在图片上方产生多1px的空白距离。所以制作图片切图时候,让图片高度为单数(奇数)即可解决。