title: What is the CSS height of a line of text? It doesn’t seem to be 1em
body: <p>Look at this fiddle:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggle(event) {
      var element = document.getElementById('changeme');
      element.innerText = element.innerText ? '' : 'some text';
  }
  button = document.getElementById('button');
  button.onclick = toggle;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#changeme {
      min-height: 1em;
      outline: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id=button type=button value='Toggle content'&gt;
  &lt;p id=changeme&gt;dynamically changing content
  &lt;p&gt;This should not move (up and down)</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a text element there (it is a <code>&lt;p&gt;</code>, but could be a <code>&lt;div&gt;</code>) which I sometimes set to be empty. (Use the button to toggle between empty and some content.)</p>
  
  <p>What height does this element with a line of text have? I want a generic answer so I can set its <code>min-height</code> to that value so that the element doesn’t collapse when empty. I thought <code>1em</code> is what I’m looking for, but <code>1em</code> seems to be the size of letters like “W” without the space below the baseline for letters like “g”.</p>
  
  <p>I’m looking for a neat trick to give the possibly empty element a constant height, without putting <code>&amp;nbsp;</code> into it. (At the moment I use <code>1.5em</code>.)</p>