如何使用 CSS 减少文本行之间的垂直间距？

Posted 2023-03-27

【中文标题】如何使用 CSS 减少文本行之间的垂直间距？

【英文标题】：How can I reduce the amount of vertical space between lines of text using CSS?

【发布时间】：2015-07-14 11:53:23

【问题描述】：

“显而易见”的答案是使用 line-height CSS 规则，但这段代码（我确实使用它的地方）：

private void GenerateSection7()

    var headerFirstPart = new Label
    
        CssClass = "finaff-webform-field-label",
        Text = "<h2><strong>Section 7: Submit Information </strong></h2>"
    ;
    headerFirstPart.Style.Add("display", "inline-block");
    headerFirstPart.Style.Add("white-space", "pre");
    headerFirstPart.Style.Add("line-height", "20%");
    var headerSecondPart = new Label
    
        CssClass = "finaff-webform-field-label",
        Text = " (This payment is subject to post audit review by Financial Affairs)"
    ;
    headerSecondPart.Style.Add("display", "inline-block");
    headerFirstPart.Style.Add("line-height", "20%");
    this.Controls.Add(headerFirstPart);
    this.Controls.Add(headerSecondPart);

    var submissionInstructions = new Label
    
        CssClass = "finaff-webform-field-label",
        Text = "<h4>Submit completed and approved form to Mail stop: FAST/AP Office</h4>"
    ;
    this.Controls.Add(submissionInstructions);

...产生这个结果：

如您所见，Cumberland 差距可能介于这两条线之间。我从 80% 开始并不断降低百分比，但这没有什么区别 - 20% 不比 50% 好（不比 80% 好）。

我怎样才能收紧字里行间的“玩”？

更新

在 oriol 和 quinnuendo 的推动下，我将代码更改为：

private void GenerateSection7()

    var headerFirstPart = new Label
    
        CssClass = "finaff-webform-field-label",
        Text = "<h2><strong>Section 7: Submit Information </strong></h2>"
    ;
    headerFirstPart.Style.Add("display", "inline-block");
    headerFirstPart.Style.Add("white-space", "pre");
    //headerFirstPart.Style.Add("line-height", "20%");
    headerFirstPart.Style.Add("margin", "0");
    var headerSecondPart = new Label
    
        CssClass = "finaff-webform-field-label",
        Text = " (This payment is subject to post audit review by Financial Affairs)"
    ;
    headerSecondPart.Style.Add("display", "inline-block");
    //headerSecondPart.Style.Add("line-height", "20%");
    headerFirstPart.Style.Add("margin", "0");
    this.Controls.Add(headerFirstPart);
    this.Controls.Add(headerSecondPart);

    var submissionInstructions = new Label
    
        CssClass = "finaff-webform-field-label",
        Text = "<h4>Submit completed and approved form to Mail stop: FAST/AP Office</h4>"
    ;
    submissionInstructions.Style.Add("margin", "0");
    this.Controls.Add(submissionInstructions);

...但它仍然生成完全相同的页面（最后两行之间的大峡谷阻止了 Evel Kneivel 安全地穿越广阔）。

注意：我尝试了“0”（如上所示）和“0px”作为边距值，结果都相同。

【参考方案1】：

行高不是这里的问题。问题是元素之间的空间，它由margin 属性控制。

这些往往被预设为允许“正常”文本流的一些值，因此您将在标题前后以及段落周围留出空间。

标题有不同数量的margin-top 和margin-bottom，具体取决于标题的级别（h2 将超过 h4）。例如有时是“1em”（当前字体中大写 M 的宽度）。

所以你会想要减少这些，或者直接将它们设置为 0 并从那里进行实验。需要为实际标题（h4、h2 或其他）而不是为包含元素设置边距，它们将不继承它。对于初始实验，您可以尝试直接在代码中应用所有内容，例如 <h4 style='margin:0px'> ....。要获得适当的解决方案，您需要为特定情况定义实际的 CSS 表，将类引入标题或周围的 div 或类似物。

在某些情况下，您可能还需要查看 padding 属性以完全控制间距。

【讨论】：

关于问题中的更新：需要为实际标题设置边距 - h4 和 h2，而不是包含元素，它们不会继承它。因此，首先尝试直接在代码中使用“

【参考方案2】：

问题不是line-height，而是元素之间的垂直边距。还有headerSecondPart 是未标记的事实。

请参阅example 了解解决方案。