title: Adjusting line-height of label elements in HTML forms
body: <p>I have a form with a wrapping <code>&lt;label&gt;</code> element, but the space between the <code>&lt;label&gt;</code>'s two lines is too big and I can't seem to adjust the line-height of the <code>&lt;label&gt;</code>.  </p>
  
  <p>Here is an example of a <code>&lt;label&gt;</code> and a <code>&lt;p&gt;</code>, both with the same CSS applied.  As you can see, the <code>&lt;p&gt;</code> adjusts correctly, while the <code>&lt;label&gt;</code> remains unchanged.  </p>
  
  <p><a href="http://jsfiddle.net/QYzPa/" rel="noreferrer">http://jsfiddle.net/QYzPa/</a></p>
  
  <p><strong>CODE:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form label,
  form p
  {    
    font-weight:bold;
    line-height:.7em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form style="width:200px;"&gt;
      &lt;fieldset&gt;
           &lt;label for="textarea"&gt;In ten or fewer words, explain American history&lt;/label&gt;
          &lt;p&gt;In ten or fewer words, explain American history&lt;/p&gt;
          &lt;textarea name="textarea" rows="5" &gt;&lt;/textarea&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>