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

Question

The "obvious" answer is to use the line-height CSS rule, but this code (where I do use that):

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

...produces this result:

As you can see, the Cumberland gap could fit between these two lines. I started with 80% and kept reducing the percentage, but it makes no difference - 20% is no better than 50% (which was no better than 80%).

How can I cinch up the "play" between the lines?

UPDATE

Spurred on by oriol and quinnuendo, I changed my code to this:

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

...but it still generates exactly the same page (with the Grand Canyon between the last two lines preventing Evel Kneivel from safely traversing the expanse).

Note: I tried both "0" (as shown above) and "0px" as the margin values, and the results are identical either way.

Answer 1

Line height is not the problem here. The problem is the space between the elements, which is controlled by the margin properties.

These tend to be preset to some values that allow for "normal" text flow, so you will have space before and after a heading and around paragraphs for instance.

Headings have various amounts of margin-top and margin-bottom depending on the level of the heading (h2 will have more than an h4). For instance it is "1em" sometimes (the width of a capital M in the current font).

So you will want to reduce these, or set them to 0 directly and experiment from there. The margins need to be set for the actual headings (h4, h2, or whatever) not for the containing element, they will not inherit it. For initial experiments you can try to just apply everything directly in the code, something like <h4 style='margin:0px'> ..... For a proper solution you would want to define actual CSS sheets for the particular case with introducing classes into the heading or in some surrounding div or an analogue.

In some cases you may also need to check out the padding property to fully control the spacings.