解决插入img图片底部空隙问题（原因+解决方案）

最新推荐文章于 2023-06-22 09:10:46 发布
最新推荐文章于 2023-06-22 09:10:46 发布
阅读量1k 收藏 4
点赞数 2
分类专栏： CSS 文章标签： 1024程序员节 前端 css3 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43394976/article/details/120933810
版权
本文介绍了在HTML中插入图片时底部出现空隙的原因和两种解决方案。图片默认与文字基线对齐，通过调整`vertical-align`属性或将其转换为块级元素可消除空隙。
摘要由CSDN通过智能技术生成

当我兴高采烈的准备了一个div盒子^^

然后给它加了一个红色的边框^^

然后把我心爱的倪妮放进去 ^^

？？？为什么插入图片底部会有缝隙呢！！

其实这是因为图片默认是和文字基线对齐（baseline）的，这里以小写字母j为例

有点像小学英语本中四线三格的第三线

所以图片会留有空隙

 

 那么第一个解决办法就是改变图片的对齐方式vertical-align&#

最低0.47元/天 解锁文章
吱昂张……
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
常见浏览器兼容性问题与解决方案
张媛的博客
11-19 244
常见浏览器兼容性问题与解决方案 　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 　　在学习浏览器兼容性之前，我想把前端开发人员划分为两类： 　　第一类是精确按照...
li中插入img图片间有空隙的解决方案
10-25
在li中纯放图片img,出现的bug是图片之间有3px的间隙,给li加高度也无效,解决图片间有空隙方法如下:
图片底侧空白缝隙的解决办法
qq_54598875的博客
04-01 491
图片底侧空白缝隙的解决办法
解决图片底部有空白空隙问题
qq_37875903的博客
09-27 1155
原因：图片底部默认和文字的基线对齐，所以会有空白间隙 解决方法： 1.给图片设置vertical-align属性： vertical-align:middle/bottom/top; 2.把图片转换成块级元素： display:block;
img底部空白间隙的问题
m0_51328823的博客
03-22 321
img底部空白间隙的问题 先看代码： <!DOCTYPE html> <html lang="zhCn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
如何清除图片下方多余空隙，简单学懂处理方法及原理
Henry13133333的博客
08-08 1133
div 里面放个img，发现div边框却没有包住img，底部留下了一丝空隙... 解决方法 ①： 给父级一个 font-size：0； 解决方法 ① 其原理：img这个内联可能会被当作字符串看待(⊙ˍ⊙) 默认的字体样式影响了它。 那么，既然因为他是内联才这样，我们不如让他变...???????????? 解决方法 ②：给 img 一个 display:block; 解决方法 ② 块级元素自然就 ╮(╯▽╰)╭ ，但是 ❗ 但是，如果你的图需要居中，那么text-align:cente
如何解决img标签下面的小空隙
关注我！带你一路 "狂飙" 到底！
11-17 498
很多初学小伙伴在写页面的时候碰到过这样的问题，当我们用一个div直接包裹img，img的下方会出现3px间距，如图： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title&g
html+css+js基础问答
qq_43751465的博客
08-26 5200
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6384
h5(html5)+css3+移动端前端 知识点详细总结
img 固定在父容器底部_img图片与容器下边界的缝隙的解决方式
weixin_39970689的博客
01-13 220
今天在给图片弄hover遮罩时，发现遮罩的下方与图片的下边界没有对齐，而是多了4px左右，这里就记录下几个解决方案今天在给图片弄hover遮罩时，发现遮罩的下方与图片的下边界没有对齐，而是多了4px左右，这里就记录下几个解决方案。通常在img图片的父级容器是块级元素时，就会造成如下的现象：.css_img_main{border: 1px solid #f00; width: 475px;}我们看...
html网页图片下方空隙太大,网页制作中图片上下间为什么会有空隙？解决办法...
weixin_34727107的博客
06-18 2384
尽管已经是老掉牙的东西了，而且IMG在html中出现空隙的老式浏览器好多已经一去不复返了，但还是要给大家普及一下原因及原理。造成图片在IE下与容器下边界有空隙的原因图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离(这个距离和 font-size，font-family 相关，不一定是 5px)，所以设置 vertical-align:to...
img图片元素下多余空白解决方案
bennett2009的专栏
07-06 911
在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳， 供大家参考。 1、将图片转换为块级对像 即，设置img为： display:block; 在本例...
CSS之垂直对齐
qq670471201的博客
11-19 390
CSS之垂直对齐 vertical-align: baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的底端与行中最低的元素...
解决图片底部有空白间隙的问题
sinat_38944746的博客
11-12 1024
解决图片底部有空白间隙的问题
CSS | 解决html中img标签图片底部存在空白缝隙的问题
最新发布
青春木鱼的博客
06-22 5506
在不对垂直对齐方式进行调整的状况下，图片（底部）默认是和文本基线对齐（baseline）的，因为基线对齐，所以，图片的下方就会产生一条空白缝隙的状况
img标签的底部间隙问题
jane900的博客
09-14 738
首先来看一下img标签在div中的底部间隙 造成img标签的底部间隙的原因 img标签为行内元素(inline)，默认对其方式为vertical-align: baseline(基线对齐) 解决img标签底部间隙的几种方法 方法一：将对其方式改为底线对其 img { vertical-align: bottom; } 方法二：修改行高，使行高变小，这样基线下方的位...
去除图片img下间隙的方法
喵喵的博客
04-25 2219
在一个容器放入图片时，容器大小会比图片大，因为有的文字可能会出于基线，撑开盒子。 解决方案： （1）body{ font-size: 0px; } （2）img{display: block; } （3）img{ vertical-align: middle; } ...
解决img图片底部空白间隙的方法。
qq_15034541的博客
09-10 958
最做一些项目的时候发现引用图片时下方总出现空白，情况如下图所示。 <style> .img-box {border: 2px solid red;width: 550px;} </style> <div class="img-box"> <img src="./img.png" alt=""></div> 后发现原因是行内块元素会和文字的基线对齐，要解决这个问题其实很简单，主要方法有两种： 给图片添加 vertical-align: midd
解决IE6透明背景图片问题与代码实例
本文主要探讨了在IE6浏览器下如何实现透明背景图片的兼容性问题，并提供了解决方案。IE6由于其对CSS3和PNG-24透明度的支持不足，导致透明背景图片在该环境下可能出现显示问题。为了解决这个问题，开发者可以采用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值