wap门户网站,七彩发光字生成器,有名的app开发公司,建设商业门户网站的重要div里嵌套了img底部会有白块 因为img默认是按基线(baseline)对齐的。对比一下图片和右边的p, q, y等字母#xff0c;你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。 解决方案#xff1a;一#xff1a;vertical-align: bottom你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。 解决方案一vertical-align: bottom推荐 解决方案二displayblock不推荐 不推荐原因因为img在浏览器里的默认样式是inline,除非有特别的需要否则还是不改变盒模型为好在这个问题中本质还是行内元素的纵向对齐问题可以给img调整vertical-align来解决本题中用bottom就行了 扩展什么是基线 基线就是我们小时候用的英语本中中间的第三条线就是基线 第一条线是上升高度帽高度 第二条线是中值高度 第四条线是下降高度 解读ascent 上升 mean line 平均线 descent 下降 html img 图片上方产生1像素px间隙解决 方案一通过css对图片加一个浮动元素比如.divcss5 img{ floatleft} 方案二将图片高度处理为单数1、3、5、7单数比如图片本身为200px高度为了解决我们将图片PS处理成201px或199px高度。图片本身高度为202px双数在IE6和IE7浏览器中就会在图片上方产生多1px的空白距离。所以制作图片切图时候让图片高度为单数奇数即可解决。 转载于:https://www.cnblogs.com/qinmengjiao123-123/p/5436468.html
