html - 如何只为标签设置行高

Question

我正在创建一个需要行高的 HTML 页面，为此我正在使用 line-height CSS。这是我的代码。

.heading{
  font-size:2em;
  font-weight:bold;
}


.body{
  font-size:1.3em;
}

.container{
  max-width:75%;
  line-height:2;
}

<div class="container">

<div class="heading">
  What is Lorem Ipsum?
</div>
<div class="body">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

我的问题是，行高甚至应用于文本，但我希望仅为标签保留高度。在我当前的示例中，我只给出了 2 个 div，实际上，甚至可能有 p 标签。请让我知道如何实现这一目标。

Answer 1

与其为 div 指定行高，不如使用 margin 或 padding 作为间距。行高通常用于设置文本行之间的距离，如果您仍然需要 div 中的行高，则下面提供了代码

.heading{
  font-size:2em;
  font-weight:bold;
}


.body{
  font-size:1.3em;
}

.container{
  max-width:75%;
  
}
.container .heading
{
  line-height:2;
}

<div class="container">

<div class="heading">
  What is Lorem Ipsum?
</div>
<div class="body">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>