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

Question

"obvious" 答案是使用行高 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% 好）。

如何收紧字里行间的"play"？

更新

在 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);
}

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

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

Answer 1

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

这些往往会预设为一些允许 "normal" 文本流的值，因此您将在标题前后和段落周围有 space。

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

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

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

Answer 2

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

请参阅 example 了解解决方案。

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

How can I reduce the amount of vertical space between lines of text using CSS?

css

web-parts

sharepoint-2010

更新