title: CSS space lines between spans
body: <p>I have this structure:</p>
  
  <pre><code>&lt;div class="gBigPage"&gt;
      &lt;span class="gBigMonthShort"&gt;FEB&lt;/span&gt;&lt;br /&gt;
      &lt;span class="gBigDayShort"&gt;23&lt;/span&gt;&lt;br /&gt;
      &lt;span class="gBigYearShort"&gt;2011&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The gaps between the text lines are too big, I need them shortened so they are all virtually touching.</p>
  
  <pre><code>/* Mouseover div for day numbers */
  .gBigPage{
      height:45px;
      width:30px;
      font-family:Arial;
      font-weight:bold;
      background-color:#ffee99;
      text-align:center;
      border-top:1px solid #c0c0c0;
      border-left:1px solid #c0c0c0;
      border-right:1px solid #c0c0c0;
      position:absolute;
      z-index:3;
  }
  .gBigPage:hover{
      cursor:pointer;
  }
  /* In the big day box, the month at top */
  .gBigMonthShort{
      text-transform:uppercase;
      font-size:11px;
  }
  .gBigYearShort{
      font-size:11px;
  }
  .gBigDayShort{
      font-size:16px;
  }
  </code></pre>
  
  <p>I can't do relative positioning for the spans, as there is a bug in Chrome which flickers the mouseover effect, pure CSS is the only thing that seems to work.</p>
  
  <p>Fiddle for example:
  <a href="http://jsfiddle.net/GmKsv/" rel="nofollow">http://jsfiddle.net/GmKsv/</a></p>