CSS Flex布局首项li边框与文本间距偏大问题求助

问题根源 #

你遇到的第一个<li>底部边框与文本间距过大的问题，本质是浏览器默认行高的相对计算和Flex布局的默认对齐逻辑共同导致的：

• 浏览器默认line-height是基于字体大小的相对值（通常在1.1~1.2之间），大字体的行高绝对值会远大于小字体；
• Flex容器默认align-items: stretch会让所有<li>高度拉伸至容器最高值，再加上文本的基线对齐规则，最终放大了大字体元素的底部间距。

无需负margin的解决方案 #

通过控制行高和Flex对齐方式，就能从根源解决问题，以下是两种可行方案：

方案1：固定行高+垂直居中对齐

给所有<li>设置统一的行高，并让文本在元素内垂直居中，彻底消除字体大小带来的间距差异：

ul{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  /* 去掉font-size:0，它会导致子元素em单位计算失效，文本消失 */
}

li{
  display:flex;
  font-size: 1.3em;
  border: 1px solid black;
  justify-content: flex-end;
  /* 固定行高，消除字体大小带来的行高差异 */
  line-height: 1;
  /* 让文本在li内垂直居中，对齐更一致 */
  align-items: center;
}

li:nth-child(1){ font-size: 3.6em; }

方案2：统一相对行高+基线对齐

如果需要保留文本的行高呼吸感，可以给所有<li>设置相同的相对行高，同时调整Flex对齐方式为基线对齐：

ul{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  align-items: baseline; /* 让所有li基于文本基线对齐 */
}

li{
  display:flex;
  font-size: 1.3em;
  border: 1px solid black;
  justify-content: flex-end;
  line-height: 1.2; /* 统一相对行高，确保间距比例一致 */
}

li:nth-child(1){ font-size: 3.6em; }

关于font-size:0的误区 #

你之前给<ul>设置font-size:0导致文本消失，是因为em单位是相对于父元素字体大小计算的，父元素字体为0时，子元素的1.3em、3.6em都会被计算为0，这是错误的用法，完全没必要这么设置。

结论 #

完全不需要用负margin这种hack手段，通过控制行高和Flex对齐方式，就能优雅解决这个间距不一致的问题。

内容的提问来源于stack exchange，提问作者Konrad Viltersten