HTML在插入图片时，块级元素和块级元素总有一些小缝隙。解决方案

最新推荐文章于 2023-06-22 09:10:46 发布

搬搬砖得了

最新推荐文章于 2023-06-22 09:10:46 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/m0_55328858/article/details/123703529

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了HTML中图片下方出现间隙的原因，以及如何通过将img元素设置为块级元素来消除这一问题。此外，还提出了一种替代方案，即删除DOCTYPE声明以避免空隙。博主将持续在CSDN上分享编程过程中的问题和解决方案，欢迎同行交流。

摘要由CSDN通过智能技术生成

<img src="https://cdn.pixabay.com/photo/2021/08/04/13/06/software-developer-6521720__480.jpg" alt="">
<div style="background:gold;width: 100%; height: 300px; "></div>

解决方案是将img元素转换为块级元素就可以了，使用CSS实现为

img {
    display:block;
}

原因是由于我们在编写HTML时，为了美观和可读性会将代码换行或者加一些制表符。一部分主流的浏览器会将这些制表符转换为一个空格或者换行。导致了上面的图片所产生的空隙。另外，还有一种解决方案为，删除DOCTYPE声明

<!--DOCTYPE html-->
<html lang="en">

我将持续在CSDN中分享在我在编码过程中遇到的一些问题以及BUG，欢迎各位大神指导，谢谢！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

搬搬砖得了

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html 图片元素的坐标定位,CSS的定位

weixin_26801149的博客

06-03

1486

CSS的定位1. 定位的必要性浮动可以让多个块级盒子一行没有缝隙地排列显示，经常用于横向排列盒子定位则是可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其它盒子2. 定位的组成定位=定位模式+边偏移定位模式：用于指定一个元素在文档中的定位方式，通过position属性设置。属性值说明static静态定位relative相对定位absolute绝对定位fixed固定定位边...

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

qq_43394976的博客

10-24

1085

当我兴高采烈得准备了一个div盒子^^ 然后给它加了一个红色的边框^^ 然后把我心爱的倪妮放进去 ^^ ？？？为什么插入图片底部会有缝隙呢！！其实这是因为图片默认是和文字基线对齐（baseline）的，这里以小写字母j为例有点像小学英语本中四线三格的第三线所以图片会留有空隙那么第一个解决办法就是改变图片的对齐方式vertical-align：给图片的垂直对齐方式vertical-align属性改为底线对齐bottom即可，当然其他对齐方式也可以，只要不是...

参与评论您还未登录，请先登录后发表或查看评论

HTML5中图片之间的缝隙完美解决方法

09-27

最近做h5的项目，碰到了一个百思不得其解的问题，几个img标签中间有大约3px的空隙，效果非常不好，纠结了半天终于解决了，下面小编给大家分享HTML5中图片之间的缝隙完美解决方法，需要的的朋友参考下吧

html 解决图片并排之间的空隙以及解释为什么图片之间会有空隙

qq_45814232的博客

10-25

5294

问题描述开发过程中我们想实现图片一排无缝连接，于是我们写下这样的代码 <title>解决图片缝隙</title> <style> img { margin: 50px auto; border: 2px solid #000; } </style> </head> <body> <img src="../img/hh.jpg" alt=""> <img src=".

html网页图片下方空隙太大,网页制作中图片上下间为什么会有空隙？解决办法...

weixin_34727107的博客

06-18

2397

尽管已经是老掉牙的东西了，而且IMG在html中出现空隙的老式浏览器好多已经一去不复返了，但还是要给大家普及一下原因及原理。造成图片在IE下与容器下边界有空隙的原因图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离(这个距离和 font-size，font-family 相关，不一定是 5px)，所以设置 vertical-align:to...

html中图片之间有缝隙,科技常识：HTML5中图片之间的缝隙完美解决方法

weixin_34464974的博客

06-09

2105

今天小编跟大家讲解下有关HTML5中图片之间的缝隙完美解决方法，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5中图片之间的缝隙完美解决方法的相关资料，希望小伙伴们看了有所帮助。最近做h5的项目，碰到了一个百思不得其解的问题，几个img标签中间有大约3px的空隙如图：后来百度查了一番，大致了解了原因，是因为浏览器把元素当成了字，空隙是给一些对齐字母后仍然长出一截的(例如j,g...

工作80：块级元素的间隙问题

歌谣的博客

11-01

230

HTML5和CSS3 WEB技术开发

张晨光老师的播客

01-02

6505

B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup

html+css知识点复习回顾，复习参考

weixin_55935744的博客

11-28

1246

这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性一、HTML部分 1、两个盒子 <div>、<span&g

h5(html5)+css3+移动端前端

weixin_58997863的博客

07-12

6436

h5(html5)+css3+移动端前端知识点详细总结

html中inline与block的细节对比

samuellovefree的专栏

12-13

968

display:block block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。 display:inline inline元素不会独占一行，多个相邻的行

块元素内行内块元素的一些间隔问题

qq_38761664的博客

11-27

1868

块元素内存在多个行内块元素时,行内块元素存在间距原因:元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当...

CSS | 解决html中img标签图片底部存在空白缝隙的问题

最新发布

青春木鱼的博客

06-22

5620

在不对垂直对齐方式进行调整的状况下，图片（底部）默认是和文本基线对齐（baseline）的，因为基线对齐，所以，图片的下方就会产生一条空白缝隙的状况

html页面小元素之如何嵌入图像

yunduanaoligei的博客

12-09

1197

今天分享下”html页面小元素之如何嵌入图像“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 img元素容许我们在HTML文档里嵌入图像。要嵌入一张图像必须应用src和alt属性，编码如下所示： <img src="../img/example/img-map.jpg" alt="Products Image" width="580" height="266" /> 1. 显示效果： 1 在超链接里

行内块元素之间默认间距问题

qq_38619931的博客

03-25

1152

1.设置font-size：0，消除换行符、tab（制表符）、空格等字符 2. letter-spacing: normal; 设置字母、字间距为0 (设置适当的缩进值,如:-3em) word-spacing: normal; 设置单词、字段间距为0 (设置适当的缩进值,如:-3em)...

html 图片是块元素吗,HTML+CSS：html元素分类之块级元素、内联元素、内联块级元素...

weixin_42679995的博客

06-04

1691

原标题：HTML+CSS：html元素分类之块级元素、内联元素、内联块级元素 html元素主要分为3类，块级元素、内联元素以及内联块级元素，本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点。(1)块级元素在html中div、 p、hx、form、ul 、 li、dl、dd就是块级元素。css属性设置display:block就是将元素显示为块级元素。块级元素特点：1、每个块级元素都从新的一...

于飞SEO：网站瓶颈期收录少如何解决？又如何突破网站瓶颈期？

仿站、源码搭建/迁移技术博客

12-23

377

目录第一种方法第二种方法第三种方法必网站运营一段时间后每个从事SEO工作人员都会越到或长或短的网站瓶颈期，该如何解决？如下提供了三个突破瓶颈的建议给大家常考：第一种方法运用社会化媒体使网站广泛传播，是不错的推广方法。要突破现有的瓶颈，从长尾关键词方面下手会有意想不到的收获。第二种方法新增加的数据收录后对流量的贡献度不大，这是因为这些新增加的数据权重不够，旧的...

HTML中加入的图片裂了,css

weixin_31937913的博客

06-04

1678

cssbody {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #000;overflow: hidden;}h1 {position: relative;font-family: 'Montserrat', Arial, sans-serif;font-size:...

块级与行内元素详解：布局与应用关键

在需要同一行显示行内元素和块级元素时，需通过CSS的`display`属性将块级元素设置为`inline`或`inline-block`。总结来说，理解并熟练运用块级元素和行内元素的区别，能够帮助开发人员更好地控制网页布局，提高网页...