在div中垂直居中的文本，它上面和下面的最小填充量(spectre.css)

Question

示例：https://jsfiddle.net/notayam/4mLzus0y/

我将顶部填充和底部填充设置为零，检查器中的框模型的布局显示在上面和下面显示为0，但是从jsfiddle中可以看到，仍然有空白。而且它不是垂直的中心。

添加vertical-align: middle !important;没有帮助。

通过为line-height尝试不同的值，我使它垂直地居中，但这并不能消除文本上面和下面不需要的填充。

我挖出了一些旧的代码，它们有类似的情况(使用引导)，我花了足够长的时间才能得到我想要的东西。它在使用display: inline-block的地方使用block。虽然我不知道这是否有帮助，但我尝试在这里加入display: inline-block !important;。但是它仍然在检查器中显示为block；它同时显示了我的css和指定inline-block的谱css，但是在元素上显示了block。我不知道那是从哪里来的，也不知道为什么覆盖不起作用。

更有效地调试CSS的技巧将是非常受欢迎的。我真的需要一个表来尽可能简洁地显示大量的数据，而且我很乐意让它发挥作用，再也不用靠近CSS了。

该应用程序的其余部分使用Python3/Airium/瓶，如果这可能重要的话。运行在MacOS 12.1上的Firefox100.0.2上。我只会在本地运行，所以对其他浏览器的支持对我来说并不重要。

Answer 1

.btn {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: unset !important;
}

Answer 2

我不知道我是否明白你想要什么，但以下是一些解决办法：

.btn-group .btn {
  padding-top: 0;
  padding-bottom: 0;
  /* This is to clear line height */
  line-height: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

我们可以将您的按钮转换为弹性框，这样您就可以控制高度，并且没有垂直填充。