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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2561 天前的主题，其中的信息可能已经有所发展或是发生改变。

代码如下，用 vue 写的

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

10 条回复 • 2017-12-20 15:03:31 +08:00

ferrum

2017-12-19 23:29:12 +08:00 via iPhone

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

ferrum

2017-12-19 23:29:51 +08:00 via iPhone

不是，是 img 的行高。

QuDump

2017-12-19 23:33:58 +08:00

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

QuDump

2017-12-19 23:39:43 +08:00

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

macroideal

2017-12-19 23:48:27 +08:00 via iPhone

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

ferrum

2017-12-20 00:00:16 +08:00

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

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

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

zybzzc

2017-12-20 00:55:48 +08:00 via Android

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

POPOEVER

2017-12-20 01:26:23 +08:00

试试 img { display: inherit;}

POPOEVER

2017-12-20 01:32:40 +08:00

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

QuDump

2017-12-20 15:03:31 +08:00

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