Question

任何知道是否可以与CSS保持恒定行距的人，即使你在一行上使用不同的字体大小？下面是第二段的行间距大于第一段的示例。我试图将CSS中的“巨大”跨度的行高设置为0，但这似乎还不够。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Line Spacing Test</title>
<style type="text/css">
body {
    font-size: 14px;
    line-height: 1;
}
.huge {
    font-size: 64px;
    line-height: 0;
}
</style>
</head>
<body>

<p>Here is a line using normal font size.<br />
Here is another line using normal font size.</p>

<p>Here is a line with a span with <span class="huge">huge</span> font
size.<br />
Here is another line with a span with <span class="huge">huge</span>
font size.</p>

</body>
</html>

Answer 1

只有将线间距设置得足够大，以适应所使用的最大字体，才能使线间距保持不变。根据规范，在块元素上设置line-height可设置线框的最小高度。对于内联元素，事情更复杂，但归结为让浏览器最终决定线框的高度，从而决定间距。

但是，在某些浏览器中，您可以说服浏览器使用您的身高，例如通过添加

span { display: inline-block; height: 16px; }

行间距和混合字体大小

1 个答案: