HTML CSS：如何使Div框高度等于文本高度？

Question

在此示例中， 如何使div框的高度等于字体文本的高度（无论将来是否更改字体大小）？ div框基本上应该包装文本。现在我看到多余的空间了吗？我尝试填充0px，边距0px，但是没有用。您可以在Chrome浏览器中Ctrl-shift-i下面的代码段

（这里看到了多余的填充，试图摆脱它）

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

   

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

Answer 1

这是您追求的吗：validator

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