líneas de espacio entre vanos CSS

Question

Tengo esta estructura:

<div class="gBigPage">
    <span class="gBigMonthShort">FEB</span><br />
    <span class="gBigDayShort">23</span><br />
    <span class="gBigYearShort">2011</span>
</div>

Los espacios entre las líneas de texto son demasiado grandes, los necesito acortados por lo que son todos prácticamente tocando.

/* 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;
}

No se puede hacer un posicionamiento relativo de los tramos, ya que hay un error en Chrome, que parpadea el efecto del ratón, CSS puro es el único que parece funcionar.

violín, por ejemplo: http://jsfiddle.net/GmKsv/

Answer 1

Todo lo que necesita es la línea de altura en el CSS. Agregue esto a su gBigPage.

Este es el código:

.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;
}

jsFiddle

Hope que ayuda!

Answer 2

Uso line-height en su css :) se puede reducir la distancia entre las líneas

Answer 3

Conjunto de estilo line-height de cada elemento, por ejemplo.

.gBigMonthShort { line-height: 10px; }

Answer 4

Tom, han intentado utilizar CSS line-height? texto del enlace

Answer 5

necesidad de ajustar 2 niveles de altura de la línea, uno en un recipiente y una para cada tramo.

* 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;
    line-height:4px;

}

/* In the big day box, the month at top */
.gBigMonthShort{
    text-transform:uppercase;
    font-size:11px;
     line-height:13px;
}
.gBigYearShort{
    font-size:11px;
     line-height:9px;
}
.gBigDayShort{
    font-size:16px;
    line-height: 13px;
}

Answer 6

Hacer el <span>s a nivel de bloque, y quitar los saltos de línea:

http://jsfiddle.net/GmKsv/12/