title: Using CSS to change appearance of input fields causes distortion in height/width
body: <p>So... the heights and widths aren't aligning once I add a border to my input fields.  All text fields show some distortion when I apply a border to them.... </p>
  
  <p>The long, red boxes are 167 x 21 pixels.</p>
  
  <p>The long, normal boxes are 168 x 23 pixels.  </p>
  
  <p><img src="https://i.stack.imgur.com/cPmbF.png" alt="enter image description here"></p>
  
  <p>I've played around with a lot of different stylings but I can't seem to find one that always works for all my boxes.  This includes playing with the font units, padding of the boxes, specifying an exact width and height, specifying margins... </p>
  
  <p>Current styles: </p>
  
  <pre><code>   input[type=text] {
         font-family:courier;
         font-size:80%; 
         padding: 0.1em;
     } 
  
     input.error_required { 
         border: 1px solid red; 
  
         font-family:courier;
         font-size:80%; 
         padding: 0.1em;
     } 
  </code></pre>
  
  <p>I can't seem to figure out what is causing this to happen... it's not the most horrible thing in the world but I'd like to correct it, if I can.  </p>
  
  <p>second example:
  <img src="https://i.stack.imgur.com/sNR8A.png" alt="enter image description here"></p>
  
  <p>excessive styles that produced this: </p>
  
  <pre><code>   input[type=text] {
        font-family: courier;
        font-size:   80%; 
        padding:     0.1em;
        height: 20px; 
        margin: 0.1em;
  
     } 
  
     .input_error_required { 
        border: 1px solid red; 
        font-family: courier;
        font-size:   80%; 
        padding:     0.1em;
        height: 20px; 
        margin: 0.1em;
     } 
  
     .input_error_unique { 
        border: 1px solid orange; 
        font-family: courier;
        font-size:   80%; 
        padding:     0.1em;
        height: 20px; 
        margin: 0.1em;
     } 
  </code></pre>
  
  <p>html is just basically this repeated:</p>
  
  <pre><code>&lt;input name='real_server_name' type='text'&gt;&lt;/input&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input name='real_server_ip' type='text'&gt;&lt;/input&gt;
  </code></pre>