CSS space lines between spans
20,904
Solution 1
All you need is line-hight in your css. Add this to your gBigPage
.
Here is the code:
.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;
line-height: 13px;
}
Demo on jsFiddle
Hope it helps!
Solution 2
Make the <span>
s block-level, and remove the line breaks:
Solution 3
Use line-height in your css :) you can reduce the gap between lines
Solution 4
Set each element's line-height
style, e.g.
.gBigMonthShort { line-height: 10px; }
Solution 5
Tom, have you tried using CSS line-height? link text
Comments
-
Tom Gullen almost 2 years
I have this structure:
<div class="gBigPage"> <span class="gBigMonthShort">FEB</span><br /> <span class="gBigDayShort">23</span><br /> <span class="gBigYearShort">2011</span> </div>
The gaps between the text lines are too big, I need them shortened so they are all virtually touching.
/* 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; }
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.
Fiddle for example: http://jsfiddle.net/GmKsv/