前端小白请教一个 table 行高的问题

[QuDump]

代码如下，用 vue 写的

https://gist.github.com/QuDump/61dea44d743f2d3ec7c8dcbd5dca38ad

我只照着 V2EX 的 css 设置的，但是无论怎么调整，img 的高度总是比设置的高度大 4px。折腾了一个晚上了，都没有弄明白原因。 有没有大神能指导一下

[bayallen]

没看代码，但我猜说因为元素固定的行高导致的。试试把 img 的父元素行高设置为零。

[bayallen]

不是，是 img 的行高。

[QuDump]

@ferrum 父元素就是 td , 没有设置高度

[QuDump]

@ferrum 不好意思，描述有点问题。img 的父元素是 td， 假设 img 的高度设为 48px，td 的高度就变成了 52px，F12 查看是 img 顶端对齐了，下面多出来 4 像素

[macroideal]

没看代码，是不是 box-size 的问题??

[bayallen]

@QuDump 你这代码我都不好测试啊。试试在 Dev Tools 里把 img 外面的 a 的行高设置为 0，或者 img 的设置为 0。

我以前也遇过类似问题，解决方案就是上面的。

参考： https://www.zhihu.com/question/21558138

[zybzzc]

父元素 font-size 设为 0,我猜的

[POPOEVER]

试试 img { display: inherit;}

[POPOEVER]

是因为 img 默认是 inline-block，inline-block 就是会有这个间隙问题，通常就是 7 楼说的设置 font-size: 0; 我是前阵子做一个布局的时候偶然发现可以用 display: inherit; 来解决的，不过不保证你能用哦

[QuDump]

@macroideal
@ferrum
@POPOEVER 确实如 7 楼所言，font-size 设为 0 就正常了