How do I make an inline element take up space when empty?

Question

I have an h1 and h3 tag that will erase itself and type, using theater.js. The problem is that when it erases itself to empty, the height of the div it's in get smaller, then snaps bigger when it has content again.

I want to make the h1 and h3 tag (or change the tag completely) keep its height even while empty.

Any idea?

Answer 1

Just wrap your h2/h3 tag in a div with display: inline-block; like this:

<div class="header2"><h2>ABCD</h2></div>

and then add this to your css:

    .header2 {
      min-width: 100px;
      width: auto;
      min-height:45px;
      background-color:#333;
      color:#FFF;
      display:inline-block;
      padding:10px;
    }

Here's a jsfiddle of two h2 tags with the above properties: https://jsfiddle.net/AndrewL32/e0d8my79/21/