image 标签莫名其妙多出来边距，疑似bug

分类：uni-app

原生view控件 image uni_app

.vue 页面遇到如下问题：

view 下使用 image 标签发现多出来一个边距，审查元素发现有个 body 选择器中默认有个 font-size : 16px，修改为 0 边距就不见了，或者在 image 的父标签 view 添加 font-size: 0 ，边距就会消失。能否有人解答一下这是怎么回事。

<template>  
    <view class="test">  
        <image src="../../static/c.jpg" mode=""></image>  
        <image src="../../static/c.jpg" mode=""></image>  
        <image src="../../static/c.jpg" mode=""></image>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                categoryData: [  
                    {  
                        id: 1,  
                        categoryName: '风景',  
                        categoryImgPath: '/static/c.jpg',  
                        categoryPage: ''  
                    },  
                    {  
                        id: 2,  
                        categoryName: '军事',  
                        categoryImgPath: '/static/c.jpg',  
                        categoryPage: ''  
                    },  
                    {  
                        id: 2,  
                        categoryName: '幼崽',  
                        categoryImgPath: '/static/c.jpg',  
                        categoryPage: ''  
                    }  
                ]  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style lang="scss">  
// .test { // 如果把这个加上就不会有边距  
    //  font-size: 0;  
    // }  
</style>

2022-04-20 21:23 负责人:无分享

5 个回复

DCloud_UNI_FXY

参考：https://www.zhangxinxu.com/wordpress/2010/11/%e6%8b%9c%e6%8b%9c%e4%ba%86%e6%b5%ae%e5%8a%a8%e5%b8%83%e5%b1%80-%e5%9f%ba%e4%ba%8edisplayinline-block%e7%9a%84%e5%88%97%e8%a1%a8%e5%b8%83%e5%b1%80/

4***@qq.com (作者)

这就能理解了为什么多出来一个缝隙，感谢！

2022-04-24 09:54
3***@qq.com

长知识了大哥

2024-05-16 10:47

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866

图片加背景色看看

Architecture - 潜心钻研始于1999年，成长道路无止境。cgday@qq.com

如果你的代码确定是这些，也没有引入其他CSS。那么还有一种可能。就是：

你是在微信小程序里看到的吗？
有些可能是浏览器自身给你加的，并不一定是我们自身的BUG。

建议楼主可以针对微信小程序或者特定浏览器进行条件编译。因为浏览器自身给你加，产生冲突了，没办法解决。

如果说对了，希望楼主可以采纳本人的答案。谢谢。

4***@qq.com (作者)

评论区两个评论都在质疑我的代码，难道你们复制以上代码运行后不会复现问题吗。

以上代码为电脑A测试的结果，中间引入了其他的样式，为了排除这些问题，我使用电脑B，新建项目-默认模板-复制以上代码随便放上一个图片，除了默认模板自带的东西外没添加其他内容，测试结果依旧是上述问题，去掉 test 类它就是有个边距。

2022-04-22 17:59
Architecture

回复 4***@qq.com: 就这么一行语法，不需要质疑。已经告诉你了，针对不同浏览器不同。做久了就有经验了。加油干。

2022-04-22 19:09
4***@qq.com (作者)

回复 Architecture: 即使就一行语法，因为没遇到过，所以想知道原因，DCloud_UNI_FXY 的评论找到了原因，也感谢您的解答。

2022-04-24 10:04
Architecture

回复 4***@qq.com: 和我的答案不是一样的吗？只不过我是简述。而且还告诉你了解决办法。

2022-04-26 09:40