我需要在哪里应用 line-height 才能生效？答案

【问题标题】：Where do I need to apply line-height for it to take effect?我需要在哪里应用 line-height 才能生效？
【发布时间】：2021-02-04 20:36:41
【问题描述】：

我有一个如下所示的 div：

我想减少行之间的字距。我尝试将 line-height 指令添加到包含的 div 和标签元素之一，如下所示：

<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>

...但没有区别。

我需要怎么做才能垂直“卷起”线条？

更新

奇怪的是，当我查看源代码时，我添加到 div 样式的行高（以及边距）被消除了：

<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>

【问题讨论】：

您是否检查了应用于子元素的边距或内边距？
好主意，但唯一的填充和边距是左右 - 没有顶部或底部。请查看我的更新。
div { line-height: 1.2;字体大小：10pt； } /* 数字/无单位 / div { line-height: 1.2em;字体大小：10pt； } / 长度 / div { line-height: 120%;字体大小：10pt； } / 百分比 */ div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif; } developer.mozilla.org/en-US/docs/Web/CSS/line-height

标签： html css whitespace line-height

【解决方案1】：

我相信这是因为默认样式继承自引导样式表。将以下样式添加到您的 Site.css 文件以解决该问题：

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

默认情况下，引导样式为标签添加 5px 底部边距，并为正文设置整体 line-height。

【讨论】：