CSS表格单元格，内容具有不必要的顶部边距。

Question

14

我在我的代码中使用 div 块的表格单元格布局，但是我的代码有一个问题。

我的 html 预览如此处所示。

当我在第一个面板中放置任何内容（文本或图像）时，第二个和第三个面板的 .inner div 会有一些 10-15 像素的上边距。为什么会这样？

请问有谁可以看一下并让我知道我漏掉了什么内容吗？

- Ashwin

2个回答

3

我有一个类似的情况，vertical-align:top;解决了问题。然而，我想详细说明其中的原因：

由于表格单元格默认使用vertical-align:baseline;，右侧单元格文本将与图像底部对齐，从而在顶部创建幻影间距。因此，我们需要显式设置vertical-align以绕过此行为。

- lulalala

很奇怪，你的小提琴并不像我想象中的那样呈现，看起来谷歌的标志垂直对齐到了顶部，但是我在代码中没有看到任何垂直对齐，我错过了什么吗？ - brandito

1

如果我用一行非常大的文本替换图像，可能会更有意义。您将看到两个单元格与基线对齐 https://jsfiddle.net/46tyc48y/5/ - lulalala

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ahsan Khurshid · Accepted Answer

在 #wrapper > div 中添加 vertical-align:top;