CSS中img图片下方出现空白边距的解决办法

偶然发现在排版中会出现图片下边距有4个像素的空白。在不同的浏览器中,这个空白还不是固定值,通常3-6个像素中间。通过对样式表中所有父级元素的检查,并未发现有类似边距定义。自己比较下就知道这个图片元素本身造成的。 原因: 图片行内垂直对齐的是基线,基线的位置与字体行距有关。 办法: 1、将img变为块状元素即display:block; 2、将img垂直对齐方式定义为top或bottom即vertical-align:top;、vertical-align:bottom; 3、将img父级元素文字大小定义为0即font-size:0;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏青玉伏案

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1、<html>和</html> 标签限定了文档的开始和结束点。 属性: (1)  dir: 文本的显示方向...

2465
来自专栏流柯技术学院

selenium截取具体元素图片(python版)

element = driver.find_element_by_id("xx")

1031
来自专栏lgp20151222

脱离文档流两操作,float和position:absolute的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行;

902
来自专栏吾爱乐享

php学习之css选择器(二)

1865
来自专栏数据的力量

最常用Excel快捷键--提升工作效率

1385
来自专栏IMWeb前端团队

初窥 SVG Path 动画

本文讨论的主题是 SVG Path 动画(路径动画)。之所以要讨论这个话题,是因为在项目中有要求用到它。所谓 SVG Path 动画,就是让图形有像人实时绘制一...

2826
来自专栏企鹅号快讯

css层叠样式表

CSS概述 CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表 主要作用 为了让网页元素的样式更加...

40511
来自专栏卡少编程之旅

css黑魔法简略版

30511
来自专栏HTML5学堂

CSS 1.0~3.0选择器(上)

HTML5学堂:我们学过了最为基础的id,类名和标签名选择器,然后就一直用它们了吗?如果是这样,那会丢失掉CSS选择器强大的功能。我们会花费几篇文章的篇幅,将C...

2815
来自专栏LIN_ZONE

css 使元素居中

<div style="text-align:center;">居中显示</div>

1224

扫码关注云+社区

领取腾讯云代金券