如何解决div里面img图片下方有空白的问题？

2024-03-26 12:49:13

相信网站前端开发者可能会遇到这样的问题，<div><img src="picture.png"/></div>这样的格式在html5的文档标准下会有一段空白区域，那么怎样去掉这部分空白区域呢？

操作方法

01

首先我们要知道这部分空白产生的原因。图片默认的vertical-align是baseline，也就是字母x的下边距，我们在图片后面写上x就是这样
02

如果给x加上背景色就是这样
03

可以看到图片是与字母x的下边距对齐的，也就是baseline，css2的文档中有这么一句解释，翻译过来也就是一个inline-block元素，如果里面没有inline元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。
04

所以我们只需要将img图片display:block，即可去掉div和img之间的空白
05

或者将div的line-height设置得足够小，也可以去掉空白，例如div{line-height:5px;}
06

也可以将font-size设为0，实际上也是改变了line-height
07

当然，我们可以改变vertical-align，让它不是baseline，比如设置vertical-align:middle
08

css博大精深，大家一起加油探索吧！

赞 (0)

如何解决Word2010中插入图片时变成空白框问题

前一段时间系统提示内存不够，后来在 Word 2010/2007 中点击“插入-图片”向文档中添加图片时，图片仅显示为空白边框?为什么会这样呢? 当内存不够或者 Word 程序崩溃时，可能会导致系统对 ...
解决Word2010中插入图片时变成空白框问题

前一段时间系统提示内存不够，后来在 Word 2010/2007 中点击“插入-图片”向文档中添加图片时，图片仅显示为空白边框?为什么会这样呢? 当内存不够或者 Word 程序崩溃时，可能会导致系统对 ...
PDF转换成图片不清晰怎么办？解决PDF转换成图片不清晰的方法

很多文件习惯保存成为pdf文件可以防止修改,当你需要将其保存为图片,直接保存可能清晰度达不到你的要求,这是因为你保存的图片分辨率不够,这里小生说一下如何提高保存的图片分辨率. 解决PDF转换成图片不清 ...
解决win10系统打开图片慢的方法总结

随着社会和经济的发展,电脑已经成为我们生活中必不可少的一部分,我们在打开电脑上的图片时总是很慢,那么我们应当怎么解决win10系统打开图片慢的问题呢,接下来就让小编来教你们吧.具体如下:1. 方法一: ...
如何解决华为手机图库图片乱了的问题

今天,小编给大家介绍解决华为手机图库图片乱了问题的方法,希望对大家有所帮助.具体如下:1. 首先,请大家在自己的手机中找到[图库]图标,点击进入主界面.2. 第二步,接下来,请选择右下方的[更多]按钮 ...
如何解决无法使用打印机打印图片的问题

有的小伙伴在使用打印机打印图片时,发现并不能打印图片,只能打印文档,但是却不知道如何解决这一问题,那么小编就来为大家介绍一下吧.具体如下:1. 第一步,右击桌面左下角的开始选项,接着点击弹出选项框中的 ...
iPhone苹果手机如何解决不能保存百度图片的问题

有的小伙伴在使用iPhone苹果手机时,并不能保存百度搜索中的图片,也不知道如何解决这一问题,那么小编就来为大家介绍一下吧.一.通过百度app保存图片1. 第一步,点击并打开Safari 浏览器,在浏 ...
如何在电脑中解决无法打印完整图片的问题

有的小伙伴在使用电脑时,想要打印图片,但是发现无法打印完整图片,那么该如何解决这一问题呢?小编就来为大家介绍一下吧.具体如下:1. 第一步,右击想要打印的图片,接着点击弹出窗口中的打印选项.2. 第二 ...
怎么在电脑版Word中解决只看到插入图片的图片框

电脑版Word文档被很多人使用,用来编辑文档等,有的用户在使用该软件时,插入了图片到文档中,但是发现插入的图片只显示了图片框,那么如何解决这一问题呢?小编就来为大家介绍一下吧.具体如下:1.第一步,双 ...