How to get rid of button padding?

I can't get rid of padding inside of a buttons. There probobably is something I am missing, but after several hours of googling and trying I am rising a white flag. Please help.

Buttons in question are placed in table cells as shown in the picture below. I am trying to get rid of a spacing shown in red color. Also pink arrows show that padding between rows is affected as well, although I am not quite sure if the reason stems from the same problem. When I enlarge button height, cells misalignment is still present (see second picture).

Buttons in table #1

Buttons in table #2

I have literally tried setting padding:0 and margin:0 everywhere with no success.

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>

Solution

Solution:

The spacing you are referring to is caused by the fixed height you have set on your .day-button class. If you removed it, the height will be set to auto depending on the content size.

For the spacing between the spans you can remove the <br> as @Sfili_81 said, and then change your button's display to:

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