gpt4 book ai didi

html - 控制 "top half"行高

转载 作者:行者123 更新时间:2023-11-28 16:07:52 24 4
gpt4 key购买 nike

让我先展示这个网页的代码,然后试着解释我的问题。

h1 {
border: solid;
padding-top: 0px;
margin-top: 0px;
}
body {
padding: 0px;
margin: 0;
}
<!doctype html>
<html lang="en-US">
<head>
<title>Practice1</title>
</head>
<body>
<h1>Sample H1 Header</h1>
</body>
</html>

我想要完成的是让 H1 header 几乎不接触它周围的顶部和底部边框。

现在,我知道问题出在行高上。由于我有一个降序字符(“Sample H1 Header”中的“p”),下半部分恰到好处。但是,上半部分不是。

我什至不明白为什么默认行高顶部有额外的空间?我了解“p”和“q”等降序字符的底部,但哪些字符需要顶部的额外空间?因此,我想了解这一点是我的第一个问题。

第二个问题是如何更改示例中的上半部分,以便“示例 H1 header ”几乎不触及我定义的边框。我可以将 h1 css 更改为 line-height: .7;这将给我我正在寻找的东西……预计我可怜的“p”会粘在外面。所以我想将下半部分的行高保持为默认值,但只在顶部进行更改。换句话说,如何独立控制 line-height 的上半部分和下半部分?

我确实找到了一种解决方案。这是将以下内容与 H1 header 结合使用。

line-height: .7;
padding-bottom: 7px;

这给了我正在完成的外观。但是,该解决方案的问题是,如果我决定稍后更改字体系列和大小,我似乎需要手动调整它。我想要一些更自动化的东西,我可以在需要时简单地应用它,而不必针对每种情况进行测量和修改。有什么想法吗?

或者有什么方法可以“关闭”行高的上半部分,或者让它自动调整为我正在使用的字体和大小的最高大写字母?

谢谢!

最佳答案

众所周知,每种字体都有自己的垂直空间。因此,如果您只想要边框内的垂直字体空间,则必须使行高与字体大小相同。

h1 {
line-height: 36px;
font-size: 36px;
}

有些字体在顶部有更多的垂直空间,因此您必须根据需要使用填充来管理该空间。

关于html - 控制 "top half"行高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37042188/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com