CODEWITHSUNDEEP
htmlcsswhitespaceline-height
B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10297

Where do I need to apply line-height for it to take effect?

I have a div that appears like this:

enter image description here

I want to reduce the kerning between the lines. I tried adding a line-height directive to both the encompassing div and then to one of the label elements like so:

<div class="row" id="gadsDiv" runat="server" style="display: none; border-style: solid; margin-left: 
        4px; font-weight: bold; line-height:2px;">
    <asp:Label runat="server" ID="lblMovieTitle" Style="color: blue">Movie Title     
        Unknown</asp:Label><label style="font-weight: bold; padding-left: 4px; padding-right: 4px;
    line-height:2px;"> GENRES: </label>
    <asp:Label runat="server" ID="lblGenres">None or Unknown</asp:Label>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 4px;">ACTORS: </label>
    <asp:Label runat="server" ID="lblActors">None or Unknown</asp:Label>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 4px;">DIRECTOR[S]: </label>
    <asp:Label runat="server" ID="lblDirectors">None or Unknown</asp:Label>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 4px;">WRITER[S]: </label>
    <asp:Label runat="server" ID="lblScreenwriters">None or Unknown</asp:Label>
</div>

...but it makes no difference.

What do I need to do to "scrunch up" the lines vertically?

UPDATE

Oddly enough, when I view source, the line-height I added to the div style (as well as the margin) are eliminated:

<div id="gadsDiv" class="row" style="display:block;background-color: 
        lightyellow;border: 2px solid blue;">
    <span id="lblMovieTitle" style="font-weight: bold;font-size: large;color: 
        blue;">TO KILL A MOCKINGBIRD -- </span><label style="font-weight: 
        bold; padding-left: 4px; padding-right:     4px;line-height:2px;"> 
        GENRES: </label>
    <span id="lblGenres">Crime, Drama </span>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 
        4px;">ACTORS: </label>
    <span id="lblActors">Gregory Peck, John Megna, Frank Overton, Rosemary 
        Murphy </span>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 
        4px;">DIRECTOR[S]: </label>
    <span id="lblDirectors">Robert Mulligan</span>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 
        4px;">WRITER[S]: </label>
    <span id="lblScreenwriters">Horton Foote</span>
</div>

Upvotes: 1

Views: 61

Answers (1)

Dipen Shah
Dipen Shah

Reputation: 26085

I believe that is because of default styles inherited from bootstrap stylesheets. Add following style to your Site.css file to fix that:

#MainContent_gadsDiv {
    line-height: normal;
}
label {
    margin-bottom: 0;
}

By default, bootstrap styles adds 5px bottom margin to label and sets overall line-height for body.

Upvotes: 2

Related Questions