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

最新推荐文章于 2024-05-31 15:09:06 发布
最新推荐文章于 2024-05-31 15:09:06 发布
阅读量8.7k 收藏 5
点赞数 2
分类专栏： css 文章标签： css 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen1057376155/article/details/51884182
版权

当我们用div拼接一些图片时，会发现div下方会有多出来的一条白线，用chrome浏览器查看元素的时候，
图片的高度是326.3px,但是作为容器的div的高度确是330px,貌似直接就四舍五入了，其中的原因是因为img作为行内元素，每次换行都会默认有有一个空隙
这里写图片描述
如图所示，黄色的是两个span，他们都是行内元素，两个行内元素之间有一个空隙。
红色的是两个div，他们都是块元素，之间并没有空隙

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

chen1057376155
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML图片与上面的div有空隙,div与div之间有空隙的解决方法
weixin_42298507的博客
06-04 5913
今天在制作页面的时候发现两个div之间有空隙导致两个本来应该在一起的效果，这里结合一下解决方法。当你使用HTML div块与块的中间不能紧密连接 怎么都解决不了时1、可以在中间内容里加一个* {margin:0;padding:0;}2、上下div之间有间距的问题我写了4个div,上下分布,均存在间距,代码以及效果如下:.div1{height:100px;background-color:blu...
解决在ie6中,图片下方出现空隙的办法
09-25
在IE6这个古老的浏览器中，由于其对CSS标准解析的不完全性和一些特有bug，开发者经常会在布局时遇到各种问题，其中最常见的一种就是图片下方出现不必要的空隙。这个问题通常会影响到网页的视觉效果和整体布局，使得...
display none的元素重新展示如何撑开页面_如何解决img标签下面的小空隙（详细教程）
weixin_39609503的博客
11-25 180
很多初学小伙伴在写页面的时候碰到过这样的问题，当我们用一个div直接包裹img，img的下方会出现3px间距，如图：代码：.box {border: 2px solid red;}那原因是什么呢？img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符(匿名文本)，导致下方会多出来 3px 间距，其实我们在img右侧添加一个span包裹住文本，现象会更明显有五个办法可以解决以上问题...
如何使用 CSS 去除图片下方的多余空白
最新发布
qq_25153359的博客
05-31 313
如何使用 CSS 去除图片下方的多余空白
【CSS】图片底部空白缝隙处理 ( 使用居中对齐 / 顶部对齐 / 底部对齐 | 将行内元素 / 行内块元素转为块级元素 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-16 1238
一、图片底部空白缝隙问题 二、图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) 三、图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 )
element-ui中多选框批量导出
mslmhl的博客
09-29 510
首先看代码：
在可编辑div中插入文字或图片解决思路与实现步骤
12-13
最近在网上碰到一个人问了我一个问题，在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用，基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能，我就特地看看了代码。 基本上编辑...
IE6下图片下方有空间距的多种解决方法
09-25
例如，当图片被包含在一个段落（`<p>`）或其他行内元素中时，浏览器会自动添加一些行间距。为避免这种情况，可以考虑将图片放在独立的`<div>`或`<span>`元素中，并确保这些容器没有额外的样式导致间距。 其次，一个...
div图片垂直居中 如何使div中图片垂直居中
12-13
在网页设计中，让图片或其他内容在`div`容器中垂直居中是一项常见的需求，尤其在跨浏览器兼容性方面，需要找到优雅且高效的方法。淘宝UED招聘中的一道题目提出了一个挑战：用纯CSS实现未知尺寸（但小于200px）的图片...
Jsp中如何让图片在div中居中
01-08
jsp中让图片在div中居中显示，如上图 例子： 代码如下: //CSS文件 <style type=”text/css”> #bj{ width:200px; height:200px; border:3px solid red; text-align:center; vertical-align:middle; display:...
图片溢出div问题的快速解决方法推荐
12-13
不过在不断的测试中，发现了一个严重的问题，如果图片过大，会撑破div溢出来。再由于页面是自适应页面，根据不同分辨率的显示器会做出相应的div宽度调整，所以图片即使不大，但是因分辨率不同也会出现溢出的情况。 ...
dreamweaver 怎么在网页中使用div展示图片效果?
09-24
dreamweaver 怎么在网页中使用div展示图片效果？想给网站中插入一些图片，怎么使用div展示图片呢？下面我们就来看看详细的设置方法，需要的朋友可以参考下
图片在div中垂直和水平同时对齐的实现方法
12-13
在网页布局设计中，将图片或者内容在div中实现垂直和水平同时对齐是一个常见的需求。这涉及到CSS的布局技术和定位方法。以下是如何利用`display`属性和特定的CSS技巧来达成这一目标的详细说明。 首先，我们有两个...
CSS图片下面有间隙的6种解决方案
01-19
在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决...
可插入图片的TEXT文本框
09-04
在这个例子中，`<div>`内已经预加载了一张图片（`qqface/1.gif`），用户可以直接在文本框内编辑文字，并且可以利用JavaScript来插入更多的图片。插入图片的JavaScript函数如下： ```javascript function insert() {...
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 722
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
在HTML中图片拼接时，出现空隙的解决方法
weixin_30477293的博客
12-02 1573
我们经常会在html文档中拼接图片，但每两个图片中间都会有一点点空隙。 产生原因：图片默认基线对齐解决方法： 1.img{vartical-align:bottom} 2.img{display:block} 3.盛放图片的父容器margin-top:-1px; 转载于:https://www.cnblogs.com/yuxiaohe/p/7954991.html...
div中插入图片 两张
07-27
要在div中插入两张图片，你可以使用HTML的img元素。下面是一个示例代码： ```html <div> <img src="图片1的URL" alt="图片1的描述"> <img src="图片2的URL" alt="图片2的描述"> </div> ``` 在上面的代码中，将"图片1的URL"替换为第一张图片的URL地址，将"图片1的描述"替换为对第一张图片的描述。同样地，将"图片2的URL"替换为第二张图片的URL地址，将"图片2的描述"替换为对第二张图片的描述。 请确保你有两张图片的URL地址，并且将其替换到示例代码中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值