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

最新推荐文章于 2022-06-30 10:58:01 发布
最新推荐文章于 2022-06-30 10:58:01 发布
阅读量886 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43254676/article/details/98485761
版权

在这里插入图片描述

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

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

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

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

奥特蛋_mm
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML、CSS/<img>始终与<div>有空隙（左边），怎么做都消不去
qq_38959715的博客
01-31 7250
状况如图 解决后     容器中始终会存在空隙，解决方案 一、首先检查父级元素的margin：和padding:是否设置了不对的值 将margin: 0px 0px; padding: 0px 0px;复制到父级元素样式中（若父级元素有&lt;ul&gt;，也需复制，经常会因为这个地方）   二、给图片img标签display:block img{display:bloc...
解决图片与div之间的间隙问题
qq_45587146的博客
11-08 4864
解决图片与div之间的间隙问题 前几天的晚自习作业遇到这样一个问题，在没有设置任何内边距，外边距的情况下，图片和div块元素之间会出现一些间隙，为此和同学讨论到了十一点多才解决了这个间隙问题（真是一把辛酸泪……），来吧，一起看看这些间隙问题，并干掉它！ 情况一：块元素中放图片，父子关系 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n
div包裹图片时，底部有空隙
少油少盐不要辣
04-11 1134
现象 原因 img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px 解决办法 设置display:block img { vertical-align: middle; }
div块中图片缝隙
sbc_sbc的博客
03-06 333
在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的问题 该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳， 供大家参考。 1、将图片转换为块级对像 即设置img为： display：block； 在本例中添加一组CS...
如何让图片在div中不留空隙
lz的博客
07-29 863
下面是两种解决方法 1.在div中添加样式 font-size:0 2.在img中添加样式 vertical-align: top
解决上面div背景色和下面div背景色之间的0.5px的间隙
风烟
03-30 1241
问题是这个样子的，我写了一个div有个背景色，然后下面也有个div有个背景色，然后他两之间有个1px的白色间隙，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...
解决在ie6中,图片下方出现空隙的办法
09-25
在IE6这个古老的浏览器中，由于其对CSS标准解析的不完全性和一些特有bug，开发者经常会在布局时遇到各种问题，其中最常见的一种就是图片下方出现不必要的空隙。这个问题通常会影响到网页的视觉效果和整体布局，使得...
在可编辑div中插入文字或图片解决思路与实现步骤
12-13
最近在网上碰到一个人问了我一个问题，在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用，基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能，我就特地看看了代码。 基本上编辑...
IE6下图片下方有空间距的多种解决方法
09-25
例如，当图片被包含在一个段落（`<p>`）或其他行内元素中时，浏览器会自动添加一些行间距。为避免这种情况，可以考虑将图片放在独立的`<div>`或`<span>`元素中，并确保这些容器没有额外的样式导致间距。 其次，一个...
图片填充缝隙问题
procul的博客
03-03 292
vertical-align:middle
前端问题记录篇（四）：解决图片与div容器有间距的问题
安之ccy的博客
04-12 370
div下包裹了一张img，div设置红色边框，没有手动设置padding、margin及其他定位 从图片可以看到，img的下方离红色边框还有一段距离 给图片添加： display: block; 即可去掉底下的间距
div背景图片之间存在的缝隙解决方法
Chenming_321的博客
10-30 5610
解决方法： 1.在div上加上：margin-top:-0.01rem;不一定是0.01rem；反正是负数；（最小数） 或者： 将图片：background-size: cover;铺满整个盒子即可； 根据自身代码条件做参考哈； 希望对您有帮助~ ...
vue页面 图片为背景图，底部留白问题（已解决）
蓝胖子的博客
06-30 1604
vue页面 图片为背景图，底部留白问题（已解决）
HTML图片与上面的div有空隙,div与div之间有空隙的解决方法
weixin_42298507的博客
06-04 5917
今天在制作页面的时候发现两个div之间有空隙导致两个本来应该在一起的效果，这里结合一下解决方法。当你使用HTML div块与块的中间不能紧密连接 怎么都解决不了时1、可以在中间内容里加一个* {margin:0;padding:0;}2、上下div之间有间距的问题我写了4个div,上下分布,均存在间距,代码以及效果如下:.div1{height:100px;background-color:blu...
备忘，两个div之间的缝隙问题
我心沉浮
12-12 2322
这两天在psd to div+css的过程中，发现IE系的浏览器有一个比较奇怪的问题，上下两个相邻的div之中存在3px的缝隙，具体的描述如下： 上面的div：里面有一张图片 下面的div：使用的是背景，纵轴重复 具体如图所示：   经过google之后，找到的解决办法是，找到上面的div中的图片代码所在位置，为其设定属性style="display:block"，问题解决。   ...
两个div之间空白间隙 和 div与图片空白间隙问题
love_Lie的博客
06-22 2021
1、两个div 之间有一段空白间隙 解决：给下边盒子设置margin-top 为负值 2、若图片出现空白间距问题：设置对齐方式 vertical-align为 middle或者top; 图片默认的对齐方式是基线对齐
div中插入图片 两张
最新发布
07-27
要在div中插入两张图片，你可以使用HTML的img元素。下面是一个示例代码： ```html <div> 图片1的URL" alt="图片1的描述"> 图片2的URL" alt="图片2的描述"> </div> ``` 在上面的代码中，将"图片1的URL"替换为第一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值