CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jerrythomas38
jerrythomas38

Reputation: 769

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

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)

enter image description here

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

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

Upvotes: 1

Views: 8768

Answers (1)

Dylan Anlezark
Dylan Anlezark

Reputation: 1267

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

Upvotes: 1

Related Questions