CSS космические линии между пролетами

У меня есть такая структура: 

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

Промежутки между строками текста слишком велики, мне нужно их сократить, чтобы они все практически соприкасались.

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

Я не могу сделать относительное позиционирование для пролетов, так как есть ошибка в Chrome, которая мигает эффект наведения мыши, чистый CSS-это единственное, что, кажется, работает.

Скрипка, например: http://jsfiddle.net/GmKsv/

6 3
css spacing

6 ответов:

Все, что вам нужно,-это высота строки в вашем css. Добавьте это к вашему gBigPage.

Вот код: 

.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

Надеюсь, это поможет!

7

Используйте высоту строки в css:) вы можете уменьшить разрыв между строками

1

Задайте стиль каждого элемента line-height, например 

.gBigMonthShort { line-height: 10px; }
1

Том, ты пробовал использовать CSS line-height? Текст ссылки

1

Необходимо установить 2 уровня высоты линии, один в контейнере и один для каждого пролета.

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

Сделайте блок-уровень <span>s и удалите разрывы строк:

Http://jsfiddle.net/GmKsv/12/

1