如何摆脱td标签内文本下方和上方出现的空白区域

Question

我想要完成的是当用户将鼠标悬停在td元素上时背景会发生变化。我目前的代码正在做什么如下图所示：

我试图摆脱空白区域，以便渐变填满整个td / cell。

以下代码适用于我的一行。

    <tr>
        <td class="itemTrue">
            <h4>AMA<br>ROUND ALUMINUM MAST ARM SERIES</h4>
        </td>
        <td class="itemTrue">
            <h4>AVPL-SSA<br>4 INCH SQUARE STRAIGHT ALUMINUM SERIES</h4>
        </td>
        <td class="itemTrue">
            <h4>SMA<br>ROUND ALUMINUM MAST ARM SERIES</h4>
        </td>
        <td class="itemTrue">
            <h4>AVPL-SSS<br>4 INCH SQUARE STRAIGHT STEEL SERIES</h4>
        </td>
    </tr>

以下是影响这些标记的CSS代码。

table {
  position: relative;
  top: 50px;
  box-shadow: 1px 1px 8px 7px #234229;
  width: 1300px;
  cell-spacing: 0px;
  padding: 0px;
}

table, td, tr {
  border: 1px solid black;
  font-family: 'Roboto Slab', serif;
  font-size: 12px;
  border-spacing: 0px;
  padding: 0px;
  line-height: 14px;
  vertical-align: baseline;
}

td {
  text-align: center;
  margin: 0px;
  padding: 0px;
}

#armPoles > td {
  border-bottom: 5px double black;
  margin: 0px;
}

.itemTrue :hover {
  color: white;
  background: #e4e4e4;
  background: -moz-linear-gradient(top,  #e4e4e4 0%, #295534 73%, #1d3923 88%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(73%,#295534), color-stop(88%,#1d3923), color-stop(100%,#000000));
  background: -webkit-linear-gradient(top,  #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
  background: -o-linear-gradient(top,  #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
  background: -ms-linear-gradient(top,  #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
  background: linear-gradient(to bottom,  #e4e4e4 0%,#295534 73%,#1d3923 88%,#000000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#000000',GradientType=0 );
}

h4 {
  font-weight: normal;
}

Answer 1

你遗漏了H4的标签，为什么不设置它。还不确定哪个标签搞乱了，你可以设置不同的颜色背景来帮助你调试和学习。

所以，尝试在你的CSS中添加'padding：0'等等。

Answer 2

如果您在悬停时将渐变放在<h4>上，则需要取消默认边距h4 { margin: 0; }，或者您可以将悬停效果放在td本身上：{ {1}}

Answer 3

我认为你只需要

td:hover {
  background: linear-gradient(...);
}

Answer 4

我忘记了h4可以有边距并设置这些边距来解决这个问题。

非常感谢所有前来帮忙的人！ =）