title: Reducing vertical space between two sections of text
body: <p>I'm trying to reduce the vertical space between two sections, however, being a knob at CSS doesn't help.  Using tables (heh) the spacing she is gone, but with CSS I'm pulling my hair out.</p>
  
  <p>If you copy/paste the code below you'll notice the vertical spacing between "Link Heading" and "www.123.com" is different than that between "www.123.com" and "Some more text":</p>
  
  <pre><code>Link Heading...
  www.123.com
  Some more text...
  </code></pre>
  
  <p>Here's the skinny</p>
  
  <pre><code>&lt;head&gt;
  &lt;style&gt;
  body{font:13px/27px Arial,sans-serif}
  .link{color:#0000cc}
  .heading{float:left;font-size:1.2em;margin:0;font-weight:normal}
  .result{font-size:0.850em;line-height:1em;margin-bottom:20px}
  .site,.info{float:left;font-size:1em}
  .info{color:#222234}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a class=link href='http://www.123.com/'&gt;
          &lt;span class=heading&gt;Link Heading...&lt;/span&gt;
      &lt;/a&gt;
      &lt;br&gt;
      &lt;div class=result&gt;
          &lt;span class=site&gt;www.123.com&lt;/span&gt;
          &lt;br&gt;
          &lt;span class=info&gt;Some more text...&lt;/span&gt;
      &lt;/div&gt;
  
  &lt;br&gt;
  &lt;table border=0 cellspacing=0 cellpadding=0&gt;
  &lt;tr&gt;&lt;td&gt;&lt;a class=link href='http://www.123.com/'&gt;Link Heading...&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;www.123.com&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Some more text...&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt; 
  &lt;/body&gt;
  </code></pre>
  
  <p>Now I know the answer is going to be something obvious, but I can't see the forest for the friggin css trees anymore.</p>
  
  <p>I'd appreciate any pointers.</p>
  
  <p>Thanks</p>