css 如何使行高与字体高度匹配?

ffx8fchx  于 2023-01-18  发布在  其他
关注(0)|答案(4)|浏览(128)

我试过将行高设置为1em,但是,字体上下仍然有一些空间(大约3px):

我怎样才能设置我的网站的行高,使之与字体高度完全相同?
JSF中间文件:http://jsfiddle.net/uovjzrn6/1/
超文本:

Hello, world!

CSS:

body {
    font-size: 18px;
    line-height: 1em;
}
ut6juiuv

ut6juiuv1#

请参考以下示例div HTML5/CSS3:
超文本标记语言

<div id = "sample">
    Hello, world!
</div>

中央支助系统

body {
    font-size: 18px;
    padding:0;
    margin:0;
}
#sample
{
    height: 18px;
    line-height: 18px;
    background-color: #e0e0e0;
    margin-top:-3px;
}

希望这个能帮上忙。

ggazkfy8

ggazkfy82#

我认为您使用小提琴中所述的line-height: 1(* 无单位 *)做得很好。
MDN中所述:
使用的值是这个无单位值乘以元素的字体大小。计算的值与指定的值相同。在大多数情况下,这是设置行高的首选方法,在继承的情况下不会产生意外结果。
Working Fiddle

gz5pxeao

gz5pxeao3#

line-height: 0.75;

它拯救了我们。

e4yzc0pl

e4yzc0pl4#

margin-top: 0px; margin-bottom: 0px;

应该够了

相关问题