title: HTML div border and text don't align
body: <p>I am trying to draw a div with a border and a single '+' character but the alignment is off:</p>
  
  <p><img src="https://i.stack.imgur.com/6H5EL.png" alt="enter image description here"></p>
  
  <p>The code I am using to generate this is:</p>
  
  <pre><code>var divPlus = document.createElement("div");
  divPlus.style.position = "absolute";
  divPlus.style.left = '5px';
  divPlus.style.width = '7px';
  divPlus.style.height = '7px';
  divPlus.style.top = "20px";
  divPlus.style.color = "#111111";                    
  divPlus.style.fontWeight="normal";
  divPlus.style.border = "1px solid";
  divPlus.innerHTML = '+';
  </code></pre>
  
  <p>I have played with <code>padding and margins</code> but doing so throws off alignment across browsers.  I have also tried using <code>lineHeight</code> without success.  Might there be a default that I am overlooking?</p>
  
  <p>How do I get border and text to align?</p>