CSS vertical-align, how can I remove the little spacing below the text?

Question

I have this code. Despite of being inside a td, and having specified this CSS:

.day {
    text-align: right;
    padding: 5px;
    vertical-align: middle;
    border: 1px solid black;
}

.day--hole {
    color: lightgray;
}

.day--today {
    background: pink;
}

<table>
  <tbody>
    <tr>
      <td class="day day--hole">30</td>
      <td class="day day--hole">31</td>
      <td class="day">1</td>
      <td class="day">2</td>
      <td class="day">3</td>
      <td class="day">4</td>
      <td class="day">5</td>
    </tr>
    <tr>
      <td class="day">6</td>
      <td class="day">7</td>
      <td class="day">8</td>
      <td class="day">9</td>
      <td class="day">10</td>
      <td class="day">11</td>
      <td class="day">12</td>
    </tr>
    <tr>
      <td class="day">13</td>
      <td class="day">14</td>
      <td class="day">15</td>
      <td class="day">16</td>
      <td class="day">17</td>
      <td class="day">18</td>
      <td class="day">19</td>
    </tr>
    <tr>
      <td class="day">20</td>
      <td class="day day--today">21</td>
      <td class="day">22</td>
      <td class="day">23</td>
      <td class="day">24</td>
      <td class="day">25</td>
      <td class="day">26</td>
    </tr>
    <tr>
      <td class="day">27</td>
      <td class="day">28</td>
      <td class="day">29</td>
      <td class="day">30</td>
      <td class="day">31</td>
      <td class="day day--hole">1</td>
      <td class="day day--hole">2</td>
    </tr>
  </tbody>
</table>

There's a visible gap between the position where the text should be centered and the current position of the text. It looks "upper" than it should and not totally centered. Why does this happen and how can I solve it without recurring to change the HTML or use flexbox?

Answer 1

As an example I made the height higher than needed. But give the example below a try. The height and line-height should be equal to center the text.

let height = document.getElementById('height');
let days = Array.from( document.querySelectorAll('.day') );

height.addEventListener('input', () => {
  days.forEach( day => {
    day.style.setProperty( '--height', `${height.value}px` );
  });
});

.day {
    text-align: right;
    padding: 5px;
    height: var(--height);
    line-height: var(--height);
    border: 1px solid black;
}

.day--hole {
    color: lightgray;
}

.day--today {
    background: pink;
}

:root {
  --height: 40px;
}

<form>
  <label for="height">Height (play with it to say that the text remains centered)</label>
  <input type="number" id="height" min="1" value="40">
</form>

<table>
  <tbody>
    <tr>
      <td class="day day--hole">30</td>
      <td class="day day--hole">31</td>
      <td class="day">1</td>
      <td class="day">2</td>
      <td class="day">3</td>
      <td class="day">4</td>
      <td class="day">5</td>
    </tr>
    <tr>
      <td class="day">6</td>
      <td class="day">7</td>
      <td class="day">8</td>
      <td class="day">9</td>
      <td class="day">10</td>
      <td class="day">11</td>
      <td class="day">12</td>
    </tr>
    <tr>
      <td class="day">13</td>
      <td class="day">14</td>
      <td class="day">15</td>
      <td class="day">16</td>
      <td class="day">17</td>
      <td class="day">18</td>
      <td class="day">19</td>
    </tr>
    <tr>
      <td class="day">20</td>
      <td class="day day--today">21</td>
      <td class="day">22</td>
      <td class="day">23</td>
      <td class="day">24</td>
      <td class="day">25</td>
      <td class="day">26</td>
    </tr>
    <tr>
      <td class="day">27</td>
      <td class="day">28</td>
      <td class="day">29</td>
      <td class="day">30</td>
      <td class="day">31</td>
      <td class="day day--hole">1</td>
      <td class="day day--hole">2</td>
    </tr>
  </tbody>
</table>