我来帮你搞定这个困扰已久的问题！你排查了padding、margin和line-height都没找到原因，其实问题出在<label>这个元素的默认排版特性上——它是行内元素，浏览器默认会让行内元素的基线与父容器的基线对齐，这就会在元素下方留出一小段空白（对应字体的下行空间，比如字母y、g的底部区域），这部分空白不是padding或margin，所以用常规排查方法容易漏掉。

下面给你几个靠谱的修复方案，选一个适合你的就行：

方案1：将Label改为块级/行内块元素 #

把label的显示类型改成block或者inline-block，这样它就不再遵循行内元素的基线对齐规则，空白自然就消失了：

.if-nav-menu .if-nav-menu-brand label {
  color: #664F00;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  display: block; /* 替换成inline-block也可以 */
}

方案2：调整Vertical-Align属性 #

直接修改label的垂直对齐方式，避开基线对齐，比如设置为bottom、top或者middle：

.if-nav-menu .if-nav-menu-brand label {
  color: #664F00;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  vertical-align: bottom;
}

方案3：给父容器设置Line-Height为0 #

如果.if-nav-menu-brand里只有label这一个元素，可以给父容器设置line-height: 0，消除行内元素的行高留白：

.if-nav-menu .if-nav-menu-brand {
  float: left;
  padding: 0.25rem 2rem 0.25rem 1rem;
  line-height: 0;
}

另外你提到的单行HTML写法其实不是这次问题的根源，不过行内元素之间的换行有时候会产生空格，但这次是行内元素本身的基线留白特性导致的。上面的方案都能彻底解决这个问题，你可以根据自己的布局需求选择~

内容的提问来源于stack exchange，提问作者Gary O. Stenstrom