偶然发现在排版中会出现图片下边距有4个像素的空白。在不同的浏览器中,这个空白还不是固定值,通常3-6个像素中间。通过对样式表中所有父级元素的检查,并未发现有类似边距定义。自己比较下就知道这个图片元素本身造成的。
原因:
图片行内垂直对齐的是基线,基线的位置与字体行距有关。
办法:
1、将img变为块状元素即display:block;
2、将img垂直对齐方式定义为top或bottom即vertical-align:top;、vertical-align:bottom;
3、将img父级元素文字大小定义为0即font-size:0;
原因:
图片行内垂直对齐的是基线,基线的位置与字体行距有关。
办法:
1、将img变为块状元素即display:block;
2、将img垂直对齐方式定义为top或bottom即vertical-align:top;、vertical-align:bottom;
3、将img父级元素文字大小定义为0即font-size:0;
👍 点赞
⭐ 收藏
🔗 分享
💬 评论 (1)
填写邮箱验证码用于确认邮箱归你所有;验证通过后该邮箱长期免验证,评论自动快速展示。未验证邮箱的评论一律人工复审。