Question

让我首先展示这个网页的代码并尝试解释我在问什么。

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标题只是触及它周围的顶部和底部边框。

现在，我知道问题是行高。因为我有一个降序字符（“样本H1标题”中的“p”），所以下半部分恰到好处。但是，上半部分不是。

我甚至不明白为什么默认的行高在顶部有额外的空间？我理解像“p”和“q”这样的降序字符的底部，但是哪些字符需要顶部的额外空间？我想，理解这是我的第一个问题。

第二个问题是如何在我的示例中更改上半部分，以便“Sample H1 Header”几乎不接触我定义的边界。我可以将h1 css更改为line-height：.7;这将给我我正在寻找的东西......期待我的可怜的“p”在外面。所以我想保持默认的下半部分的行高，但只是在顶部更改它。换句话说，如何控制线高的上半部分和下半部分彼此独立？

我确实找到了一个解决方案。这与H1标题结合使用以下内容。

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

这让我看起来很完美。但是，该解决方案的问题是，如果我决定稍后更改字体系列和大小，我需要手动调整它。我想要一些更自动的东西，我可以随时应用，无需为每种情况进行测量和修改。有什么想法吗？

或者有没有办法可以“关闭”行高的上半部分，或者自动调整到我使用的字体和大小的最高大写字母？

谢谢！

Answer 1

因为我们知道每种字体都有自己的垂直空间。因此，如果您只想在边框内使用字体的垂直空间，则必须使行高与字体大小相同。

function out = freediskspace
    [~,d] = dos('dir');
    C = textscan(d,'%s','Delimiter','\n'); C = C{1}{end};
    C = strrep(C,',','');
    r = regexp(C,'\d+','match');
    out = str2double(r{2});
end

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

Answer 2

每个字体都有自己的垂直空间，这正好确定了行高，因此您拥有的解决方案最适合该情况。

控制线高的“上半部分”

2 个答案: