title: Remove top and bottom padding in text input in Chrome/Firefox
body: <p>I'm trying to make a input look like plain text.  The aim is to draw a span, when user clicks the span it hides and displays an input that looks like plain text, but editable by the user.</p>
  
  <p>In Chrome and Firefox I cannot get rid of top and bottom paddings, even if I set padding and margin CSS properties to 0.</p>
  
  <p>My CSS looks like this:</p>
  
  <pre><code>input.myInput {
      font-family: "segoe ui";
      font-size: 20px;
      padding: 0px;
      margin: 0px;
      outline: none;
      border: 0px;
      vertical-align: baseline;
  }
  </code></pre>
  
  <p>See that font size is set to 20px.  Chrome and Firefox add 4px padding-top and padding-bottom, so that input is 28px tall, not 20px as expected.</p>