css 文本下方的空间取决于字体大小

pgpifvop 于 11个月前发布在其他

关注(0)|答案(1)|浏览(104)

我注意到下面的代码在边框的底部到第一个元素的文本之间产生了一个更大的距离，然后到其余的元素。

ul{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 0;
}

li{
  display:flex;
  font-size: 1.3em;
  border: 1px solid black;
  justify-content: flex-end;
}

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

li:nth-child(n+2){ font-size: 1.3em; }

我将所有可能的边距和填充归零（在浏览器中确认）。我试着set font size of the parent to 0（使文本消失！）下面的CSS。

ul{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 0;
}

我必须手动在li上设置负值吗？这似乎不是最好的做法。

css

来源：https://stackoverflow.com/questions/76362272/space-below-text-depends-on-font-size

1条答案

按热度按时间

n53p2ov01#

示例中的布局考虑到文本可能包含带有descender的字母，如f，g，q或y。
您可以使用align-items CSS属性将flex容器中的项目与基线对齐：

ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  align-items: baseline;
  gap: 1em;
}

li {
  font-size: 1.3em;
}

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

li:nth-child(n+2) { font-size: 1.3em; }

<ul>
  <li>Menu</li>
  <li>Start</li>
  <li>Runs</li>
</ul>

赞(0）回复(0）举报 11个月前

我来回答

css 文本下方的空间取决于字体大小

1条答案

相关问题

热门标签

最新问答