当div中插入图片时，图片下方有空隙的解决办法！

最新推荐文章于 2024-06-16 20:09:24 发布
最新推荐文章于 2024-06-16 20:09:24 发布
阅读量960 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43254676/article/details/98485761
本文探讨了在网页设计中，使用div包裹的img图片在设置宽度100%后出现下方留白的现象，分析了原因并提供了解决方案，即将img的display属性设置为block。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

如图所示，由div包裹的img图片，在设置宽度100%,使其完全填充div之后，图片下方有留白，

通过谷歌浏览器打开审查元素发现，图片的实际高度为400
在这里插入图片描述

换用火狐浏览器打开，发现实际高度只有396.467
在这里插入图片描述
图片的高度是396.467px,但是作为容器的div的高度确是400px,貌似直接就四舍五入了，其中的原因是因为img作为行内元素，每次换行都会默认有有一个空隙 。

所以解决空隙的办法是 display:block，这样就把图片变成块元素了，空隙就没有了!

女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9942
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
（Django）Web网页制作HTML文件时遇到的问题集合
weixin_47401619的博客
06-20 1230
前端知识点
div包裹图片时，底部有空隙
少油少盐不要辣
04-11 1244
现象 原因 img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px 解决办法 设置display:block img { vertical-align: middle; }
div块中图片缝隙
sbc_sbc的博客
03-06 421
在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的问题 该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳， 供大家参考。 1、将图片转换为块级对像 即设置img为： display：block； 在本例中添加一组CS...
如何让图片在div中不留空隙
lz的博客
07-29 934
下面是两种解决方法 1.在div中添加样式 font-size:0 2.在img中添加样式 vertical-align: top
解决上面div背景色和下面div背景色之间的0.5px的间隙
风烟
03-30 1344
问题是这个样子的，我写了一个div有个背景色，然后下面也有个div有个背景色，然后他两之间有个1px的白色间隙，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...
Element-UI - 解决el-table中图片悬浮被遮挡问题
最新发布
觉醒法师的专栏
06-16 1792
在开发中，发现element-ui在el-table中添加图片悬浮显示时，会被单元格遮挡的问题。通过查询得到的解决办法，大多是修改.el-table类中相关样式属性，但经过验证发现会影响到其他正常功能的使用。对于此问题解决其实也并不难，将悬浮图片放在body节点下，通过定位显示即可。所以对于此问题，将通过Vue.directive钩子函数，自定义弹框来实现。
前端css中盒子模型的各种属性
小蜗牛764号的博客
04-28 1977
本文讲解盒子模型的各种属性，大多数例子没有具体设置html的所有内容属性，只是针对某部分如何设值，或某个属性有什么参数，来进行一行代码的解释说明。聪明的读者肯定会自己创建个div盒子模型，然后自己设置好自己想调整的参数，创建符合自己的盒子模型。其实盒子模型还有关于布局的内容，本文没有写。因为布局可能涉及到弹性盒子模型flex，则笔者决定吧布局的内容放到弹性盒子模型中讲。部分内容可能还不够详细，如背景的样式的属性，多背景的内容本文便没有写等。本文主要是了解盒子模型的属性都有啥，常用属性的罗列一遍。
Typora的使用和Markdown文件的使用技巧——Md
sinat_37281674的博客
11-23 1007
Typora的使用和Markdown文件的使用技巧一、通用技巧1. 在图片的下面添加图注或者题注二、Typora的使用技巧1.添加目录 一、通用技巧 1. 在图片的下面添加图注或者题注 不同的软件，会有不同的方法，Typora可以使用下面的1、2。 简答的方法，但是感觉并不正规： <center>题注</center> <center style="font-size:14px;color:#C0C0C0;text-decoration:underline">图1.知乎
图片填充缝隙问题
procul的博客
03-03 338
vertical-align:middle
前端问题记录篇（四）：解决图片与div容器有间距的问题
安之ccy的博客
04-12 423
div下包裹了一张img，div设置红色边框，没有手动设置padding、margin及其他定位 从图片可以看到，img的下方离红色边框还有一段距离 给图片添加： display: block; 即可去掉底下的间距
div背景图片之间存在的缝隙解决方法
Chenming_321的博客
10-30 5991
解决方法： 1.在div上加上：margin-top:-0.01rem;不一定是0.01rem；反正是负数；（最小数） 或者： 将图片：background-size: cover;铺满整个盒子即可； 根据自身代码条件做参考哈； 希望对您有帮助~ ...
css图片自适应 有缝隙，有间隙，解决办法
小糖穿越火线
03-14 1118
问题： 图片自适应 有缝隙，有间隙 css如下： .banner { position: relative; width: 100%; min-height: 150px; overflow: hidden; } .banner img { width: 100%; height: 100%; } 解决1：object-fit: cover; 尝试无效 ...
HTML图片与上面的div有空隙,div与div之间有空隙的解决方法
weixin_42298507的博客
06-04 6245
今天在制作页面的时候发现两个div之间有空隙导致两个本来应该在一起的效果，这里结合一下解决方法。当你使用HTML div块与块的中间不能紧密连接 怎么都解决不了时1、可以在中间内容里加一个* {margin:0;padding:0;}2、上下div之间有间距的问题我写了4个div,上下分布,均存在间距,代码以及效果如下:.div1{height:100px;background-color:blu...
CSS 图片周围空隙解决方法
qq_43447509的博客
07-28 951
1.将图片display属性设置为block 2.给父级div设置样式font-size: 0 3.给父级div设置样式line-height: 0(测试效果不理想)
兼容FIREFOX下背景层的自适应高度-浏览器兼容教程
WYZSC的专栏
12-23 887
兼容FIREFOX下背景层的自适应高度-浏览器兼容教程，http://www.mb5u.com/divcssjiaocheng/28969.html
vue页面 图片为背景图，底部留白问题（已解决）
蓝胖子的博客
06-30 1821
vue页面 图片为背景图，底部留白问题（已解决）
解决图片与div之间的间隙问题
qq_45587146的博客
11-08 5208
解决图片与div之间的间隙问题 前几天的晚自习作业遇到这样一个问题，在没有设置任何内边距，外边距的情况下，图片和div块元素之间会出现一些间隙，为此和同学讨论到了十一点多才解决了这个间隙问题（真是一把辛酸泪……），来吧，一起看看这些间隙问题，并干掉它！ 情况一：块元素中放图片，父子关系 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n
实现图片在div内自适应的纯js解决方案
为了实现图片在未知尺寸的`div`容器中自适应的效果，我们需要使用JavaScript来动态地调整图片的尺寸，以确保图片能够填满容器而不失真。以下是相关的知识点详解： ### 1. JavaScript动态设置图片尺寸 在不知道`div...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值