HTML CSS：如何使 div 框高度等于文本高度？答案

【问题标题】：HTML CSS: How to Make Div Box Height Equal Text Height?HTML CSS：如何使 div 框高度等于文本高度？
【发布时间】：2019-07-16 07:27:49
【问题描述】：

在这个例子中，如何使 div 框的高度等于字体文本的高度（无论将来是否更改字体大小）？ div 框基本上应该包装文本。现在我看到额外的空间？我尝试填充0px，边距0px，但没有奏效。你可以在Chrome中Ctrl-shift-i下面的代码sn-p

（这里看到的额外填充，试图摆脱它）

div {
    padding: 0px;
    margin: 0px;
}

   

<div class="card-title cardtext">Header Title</div>

【问题讨论】：

line-height:1 ?
我觉得，a）您遗漏了一些代码或 b）您实际上突出显示的是 html 标记而不是 div 因为默认情况下 div 应该已经“包装”了文本。
有问题的 CSS 在哪里？
未来参考：stackoverflow.com/help/how-to-ask

标签： html css twitter-bootstrap

【解决方案1】：

这是你喜欢的东西吗：https://jsfiddle.net/jkyg40hm/

HTML

<div class="card-title cardtext">
  <p>Header Title</p>
</div>

CSS

div
{
 position: relative;
 display: block;

 height: auto;
 width: auto;

 background-color: #000;
}

p{
  position: relative;
  display: inline-block;

  background-color: #3d3d3d;
  color: #fff;

  width: auto;
  padding: 0px;
  margin: 0px;

  font-size: 24px;
  line-height: 15px;
}

【讨论】：

框的高度必须与字体的高度相匹配，而且它必须考虑可变的字体大小
@jerrythomas 抱歉，我知道我只是忘记了，哈哈编辑了。
好吧，如果你调整字体大小，它的更大，另外行高必须是可变的，如果我有可变的字体大小，尽量避免使用固定的像素大小
Cool 在这种情况下使用 % 而不是 px 作为行高，例如：70%
感谢它似乎工作得更多，你是如何得到 0.7 的行高的，它在书中吗？