td 中出现幽灵填充，即使我删除了填充答案

【问题标题】：Ghost padding showing up in td, even though I remove paddingtd 中出现幽灵填充，即使我删除了填充
【发布时间】：2019-01-21 14:02:44
【问题描述】：

我正在尝试使用表格制作棋盘，因此希望消除 td 元素之间的任何填充：

但是，他们得到了 8px 的填充，开发者工具说它继承自我的类 noPadding：

这没有任何意义......我该如何解决这个问题？

CSS 的其余部分，以防相关：

.noPadding {
  padding: 0px;
}

html {
  height: 100vh;
  width: 100%;
  margin: 0px;
}

body {
  height: 100%;
  height: 100%;
  margin: 0px;
}

.container-fluid {
  background-image: url(baggrunn.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

.thinBorder td,
.thinBorder th,
.thinBorder tr {
  border: solid #000 1px;
  padding: 0;
  margin: 0;
}

.borderless td,
.borderless th,
.borderless tr {
  border: none;
  padding: 0;
  margin: 0;
}

.noBordersBruh table td,
.noBordersBruh th {
  display: block;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
}

.top20 {
  padding-top: 15px;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}

.glyphicon {
  font-size: 20px;
}

.noPadding {
  padding: 0px;
}

.noMargin {
  margin: 0px;
}

.herregudbredde {
  width: 12.5%;
}

.fullBredde {
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table borderless noBordersBruh col-md-12" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="A8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="B8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="C8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="D8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="E8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="F8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="G8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="H8"></td>
    </tr>

  </tbody>
</table>

【问题讨论】：

一切似乎都正确...您确定问题不是来自您的照片吗？
感谢您的回复。确实，它看起来很合乎逻辑，这就是它如此令人愤怒的原因。我认为问题与图片无关，开发人员工具说它是从课程中继承的：imgur.com/a/Km0ASsn
你能尝试用更小的值覆盖 line-height 属性吗？让我知道它是否有效，没有代码和图像很难帮助你:)
类似于@mdubus 所说的，如果你举一个更好的例子，你可能会得到答案。见stackoverflow.com/help/mcve。换句话说：帮助我们帮助您。

标签： html css twitter-bootstrap html-table

【解决方案1】：

确保 .noPadding 类覆盖 Bootstrap 为表元素定义的“.table”类填充。

我无法测试您的代码，但其中一些 CSS 规则应该可以工作：

简单：

.noPadding {
    padding: 0 !important;
}

或者，避免 !important 指令：

.noPadding,
.table>thead>tr>th.noPadding,
.table>tbody>tr>td.noPadding,
{
    padding: 0;
}

您可能需要添加更多选择器来覆盖 .table 类，如您的 Imgur 屏幕截图所示。

【讨论】：

天哪，我不敢相信添加'！important'这么简单，我以为我之前也试过了！完全修复它。谢谢！