Question

如何使用CSS在不同大小的行之间获得相等的间距？这是我的基础html：

  <div style="font-size: 200%">A</div>
  <div style="font-size: 100%">B C</div>
  <div style="font-size: 50%">D E F</div>
  <div style="font-size: 25%">G H I</div>

尽管字体大小不同，我希望每条线之间的间距相同（即下面的红色箭头应该相等）。我无法弄清楚如何使用CSS line-height属性。

enter image description here

Answer 1

我认为其他答案几乎就在那里，但线高有点不同。我想到的方式是，行高是来自字母的中心的空间量。因此，如果您的行高为50px，则字母中间上方将有25px空间，而字母中间下方将有25px空间。这使得线条高50px。

所以为了使它们之间的空间均匀，我会使用边距底部并将线条高度设置为看起来像是对接到字母顶部和底部的东西（可能根据字体的不同而不同）使用）。在我下面的例子中，我将行高设置为.7（你可以看到它如何按下字母的实际基线和顶部高度与红色边框。然后我给了一个余量值与rem单位，所以它是相对于原始页面字体大小，而不是具有唯一字体大小的div本身。

body {
  font-size: 24px;
}

div {
    line-height: .7;
    margin-bottom: 1rem;
    border: 1px solid red;
}

<div style="font-size: 200%">A</div>
<div style="font-size: 100%">B C</div>
<div style="font-size: 50%">D E F</div>
<div style="font-size: 25%">G H I</div>

Answer 2

使用固定线高：

div {
    line-height: 50px;
}

示例：

＆＃13;

body {
  font-size: 24px;
}

div {
    line-height: 50px;
    border-bottom: 1px solid #f2f2f2;
}

＆＃13;

<div style="font-size: 200%">A</div>
<div style="font-size: 100%">B C</div>
<div style="font-size: 50%">D E F</div>
<div style="font-size: 25%">G H I</div>

＆＃13;

Answer 3

根据您需要支持的浏览器，您可以使用功能强大的rem单元。

它使用文档的基本字体大小并使用它。 xample：

body {
  font-size: 16px;
}

.large-font {
  font-size: 500%;
  margin-bottom: 10rem; /* this will be 160 pixels! */
}

.tiny-font {
  font-size: 50%;
  margin-bottom: 10rem; /* this will still be 160 pixels! */
}

这非常灵活，因为如果更改基本字体大小：边距将随之缩放（而像素值是固定的）。

Answer 4

在您的HTML文档部分中包含行高保护，如果您正在使用该文档正文或在单独的“.css”文件中包含该文档正文，并在“”部分中包含该来源。

<html>
<head>
<style>
body 
{
  line-height: 1.5;
}
</style>
</head>

Mohammed Ashiq （上面的帖子）因为一些独角兽的原因拒绝了我的回答。我写的代码按预期工作。如果不是

，就不会提出来

Answer 5

- 编辑 -

以下代码无法使用。这正是moobs所做的。我意识到我误解了。我再次发布了正确的答案。在它可以使用的代码片段中尝试一下！

-

诀窍是使用所有字体大小固定的线高，提供的线条高度超过最大的字体。

p.small {
    line-height: 40px;
}

p.big {
    line-height: 40px;
     font-size: 30px;
}

p.too-big {
    line-height: 40px;
     font-size: 40px;
}

<p class="small">
This is a paragraph with a smaller font
</p>

<p class="big">
This is a paragraph with a big font.
</p>

<p class="too-big">
This is a paragraph with a bigger font
</p>

如果您给出的行高小于最大字体大小，则实际上是强制浏览器将较大的文本显示为较小的行。这就是为什么你得到不同尺寸的不同线高

的原因

Answer 6

对此的正确答案仅仅是计算。我们所需要的只是获得相同数量的空格。两行之间的空白是从上一行的一半到下一行的一半。因此，如果我们确保每行贡献10px，例如顶部和下面除了字体大小，我们可以实现这一点。代码段将帮助您获得正确的答案，因为所选答案不适用于多行元素。

p{
vertical-align: top;
padding:0px;
margin:0px;
}
p.small {
    line-height: 40px;
font-size: 20px;
}

p.big {
    line-height: 50px;
     font-size: 30px;
}

p.too-big {
    line-height: 60px;
     font-size: 40px;
}

<p class="small">
This is a paragraph with a smaller font
</p>

<p class="big">
This is a paragraph with a big font.
</p>

<p class="too-big">
This is a paragraph with a bigger font
</p>

CSS中不同大小的文本之间的间距相等

6 个答案: