HTML CSS: How to Make Div Box Height Equal Text Height?

Question

In this example, how do I make the height of the div box equal height of the font text (regardless if I change font-size in the future)? The div box should basically be wrapping the text. Right now I see extra space? I tried padding 0px, margin 0px, but did not work. You can Ctrl-shift-i the code snippet below in Chrome

(extra padding seen here, trying to get rid of it)

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

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

Answer 1

Is this the sort of thing your after: 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;
}