CSS垂直对齐，如何删除文本下方的小间距？答案

【问题标题】：CSS vertical-align, how can I remove the little spacing below the text?CSS垂直对齐，如何删除文本下方的小间距？
【发布时间】：2019-01-28 00:46:52
【问题描述】：

我有this 代码。尽管在 td 中，并且指定了这个 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>

文本应该居中的位置与文本的当前位置之间存在明显的间隙。它看起来比它应该的“更高”并且没有完全居中。为什么会发生这种情况？如何在不重复更改 HTML 或使用 flexbox 的情况下解决它？

【问题讨论】：

我想你最好的选择是在行上设置一个高度并将其用作行高。根据我的经验，垂直对齐通常在将元素与文本而不是文本与元素对齐时起作用
您可以将 line-height 重置为 1/0.8em 以降低高度。但是 padding (px)+ unknown(px) font-size 会给出一个平均结果。尝试：.day { line-height:0.8em; text-align: right; padding: 5px; vertical-align: middle; border: 1px solid black; background: linear-gradient(to top, transparent 5px, rgba(0,0,0,0.2) 5px, rgba(0,0,0,0.2) calc(100% - 5px), transparent calc(100% - 5px) ); 以查看没有垂直显示间隙，但是，最好，如果你想要正方形。在em 中使用width 和在em 中使用相同值的line-height，而不使用padding。
我在文本下方看不到 litlle spacing。你用什么浏览器来测试，你说的小间距有多大？顺便说一句，反馈只对你有用。

标签： css vertical-alignment

【解决方案1】：

作为示例，我将高度设置为高于所需的高度。但是试试下面的例子。 height 和 line-height 应该等于文本居中。

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>

【讨论】：

【解决方案2】：

这是因为这些数字在技术上是文本，而文本 - 当使用字母时 - 具有像 g、j、p 等这样的字母，它们在基线以下延伸。这是line-height 的一部分，垂直居中以行高为中心，无论文本中是否有 g、j、p 之类的字母。因此，当您描述它时，它看起来有点垂直偏移。

为了弥补这一点，您可以应用垂直偏移量，就像我在此 sn-p 的第一行和最后一行中所做的那样，使用数字包装器并应用 position: relative 和 transform: translateY(1px);（或您的任何值）喜欢）给它：

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

.day--hole {
    color: lightgray;
}

.day--today {
    background: pink;
}
.offset {
position: relative;
transform: translateY(1px);
}

<table>
  <tbody>
    <tr>
      <td class="day day--hole"><div class="offset">30</div></td>
      <td class="day day--hole"><div class="offset">31</div></td>
      <td class="day"><div class="offset">1</div></td>
      <td class="day"><div class="offset">2</div></td>
      <td class="day"><div class="offset">3</div></td>
      <td class="day"><div class="offset">4</div></td>
      <td class="day"><div class="offset">5</div></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"><div class="offset">27</div></td>
      <td class="day"><div class="offset">28</div></td>
      <td class="day"><div class="offset">29</div></td>
      <td class="day"><div class="offset">30</div></td>
      <td class="day"><div class="offset">31</div></td>
      <td class="day day--hole"><div class="offset">1</div></td>
      <td class="day day--hole"><div class="offset">2</div></td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

.day 上有text-align: right;。将其设置为text-align: center;

【讨论】：

我猜 OP 知道这一点，因为他明确地将其设置为 right。 OP 还谈到在 td 元素中太高或“太高”