title: How to guarantee an element will have a particular height
body: <p>Say that I have this element on my page:</p>
  
  <pre><code>&lt;div style="height: 1em;"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>I want to use JavaScript to measure the height of the <code>div</code> to figure out how many px are equivalent to 1em for that element.</p>
  
  <p>So if I did:</p>
  
  <pre><code>document.querySelector('div').getBoundingClientRect()
  </code></pre>
  
  <p>Then I might get <code>16</code>.</p>
  
  <p>But what if users can inject arbitrary styles onto this webpage?  What if they do something like:</p>
  
  <pre><code>div { border: 1px solid black; }
  </code></pre>
  
  <p>Then I would get <code>18</code>, because of the unexpected border applied to all <code>div</code> elements.</p>
  
  <p>To avoid this, I could add a laundry list of styles to the div to remove potential "unexpected styles:"</p>
  
  <pre><code>&lt;div style="border: 0; margin: 0; padding: 0; height: 1em;"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>But is that list of styles comprehensive?  If not, what other styles do I need?  Or is there a better way to make this calculation?</p>