如何摆脱按钮填充?

Question

我不能去掉按钮内部的填充。也许我遗漏了什么，但经过几个小时的谷歌搜索和尝试，我发现了一个白旗。请帮助。

按钮放置在表格单元格中，如下图所示。我想去掉红色显示的间距。此外，粉色箭头显示行之间的填充也受到影响，尽管我不太确定原因是否源于相同的问题。当我放大按钮高度时，单元格仍然存在不对齐(见第二张图)。

表#1中的按钮

表#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类上设置的固定高度引起的。如果你删除它，高度将被设置为自动根据内容的大小。

对于span之间的间距，您可以像@Sfili_81所说的那样删除<br>，然后将按钮的显示更改为:

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