求助前端，为啥这里有不明空隙

[kasusa]

这是我的一个业余小项目，是一个导航页，特色是可以自定义每个按钮的右键菜单。

https://www.v2ex.com/t/825315 这是上次发帖，好久好久之前了。

最近这次（昨天）进行了更新，现在项目使用一个 json 当作数据库，可以很方便的制作不同的模板了，就不局限于视频网站了。

但是我目前遇到了一个怪问题，就是如图，有 img 的图标会有不明空隙，不知道怎么消除，请教一下 v2 网友！

项目地址： https://github.com/cornradio/watchTV/tree/main/a-plan

这个帖子的两个问题都解决了

1. 是空白字符问题：
TomVista ：
parent.font-size=0

YuxiangLuo：
https://juejin.cn/post/7078969860545314824

2. 是加载不标准 json 的问题
Rache1 ：
fetch("icon_data.json")
.then(async function (response) {
return eval(`(${await response.text()})`);
})

另外这是当时提出的建议，现在这个网页终于可以加载自定义的模板了！

[MinYa]

img 行内元素？试试设置为块级元素？ display: block;

[TomVista]

parent.font-size=0

[kasusa]

@MinYa img 使用 css 加的背景图片

[kasusa]

@TomVista 有效欸！ 啥原理……

[kasusa]

还有一个问题，是关于 js 的，我发现 json 当作数据库的话， 有一点语法错误都不行，如何让他能忽略这多一个逗号的语法错误呢?


这里是 json 载入的代码

```
fetch("icon_data.json")
.then(function(response) {
return response.json();
})
```

[TomVista]

那是个换行符,html 特色...

[marcong95]

@kasusa 两个行内<img>之间有空白字符（正则的\s+）会被替换为一个空格，所以就有这么一个谜之空白

你这个布局感觉可以上 flex 或者 grid 布局，那就不用处理这种不太符合直觉的空格了。font-size: 0 会被子元素继承，要是你想加上文字又会难受了。

[YuxiangLuo]

https://juejin.cn/post/7078969860545314824

[Rache1]

因为你这已经不是标准的 JSON 了，最简单的办法，就是用 eval 吧这个不标准的 JSON （但符合 JavaScript 预发布） 转成 JavaScript 对象。

fetch("icon_data.json")
.then(async function (response) {
return eval(`(${await response.text()})`);
})
.then(data => {
console.log(data)
})
---

或者使用 JSON5

[sgiyy]

@kasusa #5 格式化 json ，一般好像可以解决这种简单的问题。鼠标右键，选择「格式化文档」

[NoManPlay]

@kasusa #5
如果是手动写入可以通过格式化工具解决
我用的 vscode+prettier
1.在 settings.json 中为 json 文件指定用 prettier 进行格式化
```
{
...,
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
```

2. prettier 设置 trailingComma: 'none',

这样配合 FormatOnPaste/FormatOnSave/手动格式化都可以

[kasusa]

@marcong95 好的 有空学学看 flex 或者 grid 布局 这两个我都没用过。
目前用的 float ， 调整这个图标大小调整的很头大…… 因为总是对不齐

[kasusa]

@Rache1 有用 赞。

[izumiiAoba]

@MinYa @kasusa
这个好像叫做「幽灵空白节点」，可以参考[这篇]( https://juejin.cn/post/6986556064502120478)

[kasusa]

@sgiyy
@NoManPlay
因为我是用 liveserver 看实时的结果，我希望在我逐个添加菜单的时候就能看到效果，在尾部增加一个逗号可以很方便的复制到下面。

[ahswch]

父元素：font-size:0; 网上搜有解释 行内元素缝隙

[Pil0tXia]

感觉这个帖子下面给出的回答 有效率 要比其它求助帖高很多

[hokori]

@kasusa #5 json 格式就是如此啊，如果是程序的 json 对象怎么可能会出现这个逗号

[NoManPlay]

@kasusa #15 考虑一下曲线救国，json 改为对象格式，直接引入对象，对象不会有这个语法错误

[zzzzhan]

@Pil0tXia 因为这些问题都是很基础的......

[wdssmq]

人力维护的话 yml 要好一些。。

[nulIptr]

@Rache1 更简单的方法是使用规范的 json 配置文件。。。而不是打补丁

[Belmode]

多了一个”，“就不是标准 JSON 了。
把.json ，改成.js 来用，语法不变。

[marcong95]

@kasusa 现代浏览器的话 float 还用在布局上就太难受了。float 的本意是在一段文字里面左上角或者右上角插图用的，除此之外的不过只是当年没有 flex/grid 布局时候的无奈之举而已。

[lilei2023]

搜一下 ”inline-block 元素之间空隙“ 就知道了

[lilei2023]

@izumiiAoba 我擦，这谁给起了个这名字？

[kasusa]

@Belmode 还可以这样！

[kasusa]

https://watch-tv-sigma.vercel.app/ 部署好了 这里是最新版