从 Google Chrome 到 Microsoft Edge，HTML 表格上方和下方的空间差异很大答案

【问题标题】：Space above and below HTML table varies largely from Google Chrome to Microsoft Edge从 Google Chrome 到 Microsoft Edge，HTML 表格上方和下方的空间差异很大
【发布时间】：2020-03-16 19:22:50
【问题描述】：

在https://neu.seidelpartner.ch/ 网站上，我将以下 HTML 表格插入到 WordPress 文本框中：

#kunden {
  border-spacing: 30px;
}

#cell1,
#cell2,
#cell3,
#cell4,
#cell5,
#cell6,
#cell7,
#cell8 {
  font-family: "Proxima Nova Bold";
  font-size: 14px;
  color: #857f7b;
  letter-spacing: 2px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid black;
  border-radius: 15px;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.5), 2px 2px rgba(0, 0, 0, 0.4), 3px 3px rgba(0, 0, 0, 0.3), 4px 4px rgba(0, 0, 0, 0.2), 5px 5px rgba(0, 0, 0, 0.1), 6px 6px rgba(0, 0, 0, 0.08), 7px 7px rgba(0, 0, 0, 0.06), 8px 8px rgba(0, 0, 0, 0.04);
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 10px;
  padding-right: 10px;
  width: 200px;
  height: 160px;
}

<table id="kunden">
  <tr id="row1">
    <td id="cell1">BAHNUNTERNEHMEN</td>
    <td id="cell2">BEHÖRDEN</td>
    <td id="cell3">GENOSSENSCHAFTEN</td>
    <td id="cell4">INVESTOREN</td>
  </tr>
  <tr id=row2>
    <td id="cell5">PROJEKTENTWICKLER</td>
    <td id="cell6">IMMOBILIEN-ANLAGESTIFTUNGEN</td>
    <td id="cell7">KMU</td>
    <td id="cell8">PLANER</td>
  </tr>
</table>

现在我观察到，桌子上方和下方的空间变化很大，从 Google Chrome（第一张图片，大空间）到 Microsoft Edge（第二张图片，小空间）。我的意图是它在 Edge 中的外观。

我做了一些研究，似乎很多人在不同的元素上都出现了这种间距差异，但我自己无法解决这个问题。

这也是我第一次接触 HTML 和 CSS。我并没有真正从一开始就学习这些，而是研究了我需要的东西。

非常感谢您的任何反馈。

问候

【问题讨论】：

在 edge v80 和 chrome v80 中看起来完全一样（两者在您的网站上都有很大的空间 - 而不是在 sn-p 中）

标签： html css wordpress spacing

【解决方案1】：

感谢@Pete 将代码更改为 sn-p，我不知道这是可能的（非常酷的功能）。您的评论让我更深入地了解了这个问题，我可以自己解决。

表格上方和下方有一个伪元素::before 和::after。

可以通过以下方式删除它：

div.gdlr-core-pbf-column-content.clearfix.gdlr-core-js::before {
    content: none;
}

div.gdlr-core-pbf-column-content.clearfix.gdlr-core-js::after {
    content: none;
}

问候

【讨论】：