微信公众号文章排版中，去掉图片和图片之间的空白

一、本文适读对象

有一点点 css 基础的用户

二、现状

有白线！！

三、解决方法

3.1 复制出微信文章中图片的真实地址

打开源代码

选择关于图片的代码，然后copy出来，贴到一个TXT文本文件

<p>
    <img src="//wework.qpic.cn/wwpic/562882_U7_6iGDCQ0CEWS4_1618213090/0" style="" data-fmt="png" data-size="421,229" data-src="//wework.qpic.cn/wwpic/562882_U7_6iGDCQ0CEWS4_1618213090/0"/>
</p>
<p>
    <img src="//wework.qpic.cn/wwpic/958076_A0JKoP5VTrC7jqZ_1618213094/0" style="" data-fmt="png" data-size="421,229" data-src="//wework.qpic.cn/wwpic/958076_A0JKoP5VTrC7jqZ_1618213094/0"/>
</p>

这个时候就获取到微信文章的图片真实地址了

3.2 修改图片css样式

复制以下代码

<section style="box-sizing: border-box; text-align: justify;">
    <section style="text-align: center; position: static; box-sizing: border-box;">
        <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;">
            <img class="raw-image" style="vertical-align: middle; box-sizing: border-box;" src="?" data-fmt="?" data-size="?" data-src="?"/>
        </section>
    </section>
    <section style="text-align: center; position: static; box-sizing: border-box;">
        <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;">
            <img class="raw-image" style="vertical-align: middle; box-sizing: border-box;" src="?" data-fmt="?" data-size="?" data-src="?"/>
        </section>
    </section>
</section>

替换上步骤3.1获取到的真实路径

<section style="box-sizing: border-box; text-align: justify;">
    <section style="text-align: center; position: static; box-sizing: border-box;">
        <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;">
            <img class="raw-image" style="vertical-align: middle; box-sizing: border-box;" src="//wework.qpic.cn/wwpic/562882_U7_6iGDCQ0CEWS4_1618213090/0" data-fmt="png" data-size="421,229" data-src="//wework.qpic.cn/wwpic/562882_U7_6iGDCQ0CEWS4_1618213090/0"/>
        </section>
    </section>
    <section style="text-align: center; position: static; box-sizing: border-box;">
        <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;">
            <img class="raw-image" style="vertical-align: middle; box-sizing: border-box;" src="//wework.qpic.cn/wwpic/958076_A0JKoP5VTrC7jqZ_1618213094/0" data-fmt="png" data-size="421,229" data-src="//wework.qpic.cn/wwpic/958076_A0JKoP5VTrC7jqZ_1618213094/0"/>
        </section>
    </section>
</section>

将构造好的新代码贴回源代码界面

再点击源代码按钮关闭源代码编辑界面，完成

白线没了

四、注意事项

1. 本文章借助演示的平台为企业微信，公众号平台需要类比推导使用，核心逻辑就是添加css样式
2. 本次演示了两张图片无白线的情况，多个图片的拼接，就是将<section style="text-align: center; position: static; box-sizing: border-box;"><section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;"><img class="raw-image" style="vertical-align: middle; box-sizing: border-box;" src="?" data-fmt="?" data-size="?" data-src="?"/></section></section>多复制几遍
3. 主要修改的地方：src="?" data-fmt="?" data-size="?"，步骤3.1中copy出来的真实地址里可以找到所有数据，如：<img src="//wework.qpic.cn/wwpic/958076_A0JKoP5VTrC7jqZ_1618213094/0" style="" data-fmt="png" data-size="421,229" data-src="//wework.qpic.cn/wwpic/958076_A0JKoP5VTrC7jqZ_1618213094/0"/>
4. 实在没基础看不懂又急需用到的同学，那就简单点，找个编辑平台吧，他们也能解决。至于推荐，我就用过秀米