微信文章里面插入小程序以后的图片之间有空隙怎么处理？

Posted 2023-05-12

做了微信软文，然后要连接到微信商城的小程序，连接完以后发现怎么调整都是有空隙，请大神指教，如果要弄源代码那么请清晰说明！

需要借助第三方编辑器，把背景颜色设置成与小程序图片一样的颜色，虽然缝隙依然存在但是因为与背景色相同就看不出来了。

操作流程：打开第三方编辑器—插入第一张图—按回车制造出一个空行—点击第三方编辑器顶部【背景】按钮—将编辑器背景色换成与小程序图片相同的背景色（在ps里面吸色复制16位颜色码换色）—在编辑器里复制样式到微信编辑器—在提前预留好的空行里插入小程序图片。按以上方法就可以连续无缝插入多个小程序图片了。

参考技术A 你好，这个是需要用特定的编辑器进行编辑的，可是改变高度达到一个很小的距离，望采纳追问

什么编辑器

参考技术B 可以重新编辑处理，看看能否用删除键删除一些空格，使图片距离变小 参考技术C 开发小程序内容页面排版时，每次都会遇到图片自己有一定的间距，这是由于图片是行内元素的原因，自带的margin。很多程序员喜欢用负边距解决这个问题，但遇到图片之间有文字的时候，负间距就会导致图片遮盖文字的情况出现，很不友好！，那么有没有更好的办法？

也有的人喜欢用font-size:0解决，但是父级设置这个属性之后，里面的文字大小也是0，就不显示文字了，所以这也不是完美的解决方案！

当然有，而且还不仅仅有一种，以下是七娃整理的方法，都能完美的解决图片之间间距的BUG！

方案一：image图片变为块级元素
image
width: 100%;
display: block;

方案二：image图片浮动布局
.父元素
height: auto;
overflow: hidden;

image
width: 100%;
float: left;

方案三：设置图片行内对齐方式——顶端对齐
imagewidth: 100%;
vertical-align: top;

方案四：父级弹性布局flex
.父元素
display: flex;
flex-direction: column;

以上就是我解决微信小程序中图片之间有间距的常用方案了，兼容性高，遇到bug的情况少。 参考技术D 微信公众号图文排版缝隙怎么去掉（文章缝隙去除教程）
最近后台有用户给我留言“微信公众号图文排版的时候，总有个缝隙，怎么去掉？”我想这个问题，可能不少用户都有碰到，下面就给大家讲下文章缝隙去除教程。

文章最前面有空行，删不掉

图片与图片想拼在一起，但中间有个白色缝隙

样式与样式想拼在一起，但中间有个白色缝隙

今天这篇文章，我们就好好教一下大家如何将以上这些缝隙去掉。

一、文章最前面有空行删不掉

有些小伙伴反应，自己排版会不小心整出个顶部的空行来。删也删不掉，在微信公众平台后台更是难操作。我们这里给你提供两个“解题思路”！

方法1：选中空格，点击菜单栏【删除】

方法2：选中文章最顶部的样式，点击【上移】，即可消除顶部的空行。当顶部空行消除时，系统会提示“前面没有内容了，无法向上移动”。

二、图片之间的缝隙

大家都知道，在微信公众号里上传图片，图片与图片之间会出现一条白色的缝隙。尤其是【条漫】形式的文章，中间出现缝隙，真的挺不好看。

如何解决公众号文章图片缝隙问题，之前135编辑器是用“无缝样式”来解决。用户在编辑器里搜索关键词“无缝”，就可以套用样式，替换里面的图片即可。现在我们有更简便的方法了！

先将图片都上传至135编辑器内（www.135editor.com），如果图片较多，建议使用【多图上传】功能！

多说一句，这里我们提供多种图片上传方式。一般上传多张图片，直接点击【普通图片上传】。

上传图片之后，点击两张图片中，位于上方的图片。在菜单栏中选择【无缝】，两张图片就可以无缝拼接在一起。

如果文章中有多张图片，只要依此点下去，就可以把所有图片无缝拼接。最后再使用【微信复制】，或者【文章同步】的方式把文章传输到微信公众号后台即可！

三、样式之间的缝隙

我们在排版的时候，有时候会喜欢将两个样式拼接在一起来使用，但上下排列的两个样式之间此时会出现一条白色缝隙。

这样整体感就打了折扣，如果想要去除这个缝隙，你可以使用135编辑器菜单栏中的【定位】-【前间距】【后间距】【水平偏移】功能。

在我们上个例子中，上下的样式要拼在一起，只要点击下面这个样式，然后在菜单栏中点击【定位】，在【前间距】中输入一个大概的数值，这里既然要往上消除缝隙，就要输入一个负的数值。

我先输入了-5，发现样式之间还是有一点点缝隙，于是再次输入了-6，终于调整完毕。

定位这个功能不仅能够调整上下的间距，还能够调整左右间距。我们输入确切的数字，能够相对精准地将样式放置在我们想要放置的位置。

例如下面这个竖排标题样式：

我可以将左右偏移数值改为70，就有右对齐的效果：

微信小程序多张image图片排列有空隙解决方案

上个项目是卖东西的，商品详情传的组图，排上去后发现每张图片下有大概10+rpx的下边距，显得很不好看。查了一下貌似是小程序的默认样式。没找到解决方案，看到有说用微信编辑器传图的，好像很麻烦就没去试，自己琢磨了两种方法。

原本不做处理的样子：

.det-pics-w image {
  width: 100%;
  min-height: 630rpx;
}

.det-pics-w {
  position: relative;
}

第一种解决方案：flex

.det-pics-w image {
  width: 100%;
  min-height: 630rpx;
}

.det-pics-w {
  position: relative;
  display: flex;
  flex-direction: column;
}

第二种解决方式：margin-top负值

.det-pics-w image {
  width: 100%;
  min-height: 630rpx;
  margin-top: -12rpx;
}

.det-pics-w {
  position: relative;
}

两种都可以去掉这个间隙。效果如下