如何摆脱按钮填充？

Question

我无法摆脱按钮内的填充。可能有一些我遗漏的东西，但经过几个小时的谷歌搜索和尝试后，我升起了一面白旗。请帮忙。

有问题的按钮位于 table 单元格中，如下图所示。我试图摆脱以红色显示的间距。粉红色箭头也表明行之间的填充也受到影响，尽管我不太确定原因是否源于同一问题。当我放大按钮高度时，单元格错位仍然存在（见第二张图片）。

Buttons in table #1

Buttons in table #2

我确实尝试过在任何地方设置 padding:0 和 margin:0，但都没有成功。

button {
  padding: 0;
  margin: 0;
}

.day-button {
  width: 50px;
  height: 44px;
  border: none;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}

.text-up {
  font-weight: bold;
  font-size: 14px;
  background-color: aquamarine;
  padding: 0px;
  margin: 0px;
}

.text-down {
  font-weight: bold;
  font-size: 10px;
  background-color: aquamarine;
  padding: 0px;
  margin: 0px;
}

<td>
  <button class="day-button"><span class="text-up">10</span><br/><span class="text-down">NONE</span></button>
</td>

Answer 1

解法：

您所指的间距是由您在 .day-button class 上设置的固定高度引起的。如果删除它，高度将根据内容大小设置为自动。

对于跨度之间的间距，您可以删除 <br> @Sfili_81 所说的，然后将按钮的显示更改为：

button { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

如何摆脱按钮填充？

How to get rid of button padding?

css

padding