title: CSS label vertical alignment with input fields
body: <p>I'm designing a form layout to be uesd on many pages within an online system. A devout user of tables for this purpose for many years, I'm getting pretty used to using CSS + labels for this now.</p>
  
  <p>One thing I've yet to be able to master is the way different browsers pad &amp; position the label relative to the input field. I'll give a code example, plus a close up image of how it renders in each browser (IE = IE9). </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;HTML template&lt;/title&gt;
    &lt;meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="reset.css" /&gt;
    &lt;style&gt;
  body {
      font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
      font-size:13px;
      font-style:normal;
      font-weight:normal;
      letter-spacing:normal;
      margin:20px;
  }
  input {
      font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
      border:solid 1px #666;
      width:150px;
  }
  .fld {
  }
  .usr {
      border:solid 1px red;
  }
  p {
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;
      &lt;label class="usr" for="email"&gt;Email*&lt;/label&gt;
      &lt;input class="fld required email" type="text" name="email" id="email" value="Capital Letter"&gt;
  &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>OK - now I can post a pic - here is what it looks like after Ahmed Masud's changes. He was right - the reset.css file I had (from <a href="http://html5reset.org/" rel="nofollow noreferrer">http://html5reset.org/</a>) didn't have padding on the input element. However, even after applying the changes, there is still a variation in the alignment of the base of the text in the label compared to that in the input. Now Firefox is dead-level, and for IE &amp; Chrome the label text is 1px higher.</p>
  
  <p><img src="https://i.stack.imgur.com/f6eGy.jpg" alt="enter image description here"></p>
  
  <p>If I remove the link to reset.css, things change again: Chrome becomes dead-level, IE puts the label 1px higher than the input text, Firefox 1px lower than the input text. See below:</p>
  
  <p><img src="https://i.stack.imgur.com/9is1q.jpg" alt="enter image description here"></p>
  
  <p>I should point out that this is a very basic layout, simply to try and diagnose the problem. I'll be making it look all better later. But first I need to know how to make all my text line up across all browsers with one CSS solution.</p>