跨度之间的 CSS 空格线答案

【问题标题】：CSS space lines between spans跨度之间的 CSS 空格线
【发布时间】：2011-05-18 15:06:15
【问题描述】：

我有这个结构：

<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/

【问题讨论】：

内联元素很痛苦。 make your spans block-level

标签： css line spacing

【解决方案1】：

你所需要的只是你的 CSS 中的 line-hight。将此添加到您的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上的演示

希望对你有帮助！

【讨论】：

谢谢，但两行之间的差距不一致
顶部和底部的缝隙？

【解决方案2】：

在你的 CSS 中使用 line-height :) 你可以减少行之间的差距

【讨论】：

我尝试了行高，但是每个跨度都需要它自己的，当我为一个跨度添加一个行高时，它并没有多大作用！

【解决方案3】：

设置每个元素的line-height样式，例如

.gBigMonthShort { line-height: 10px; }

【讨论】：

那不行，我可以为整个div设置行高，但我需要它们不同
啊解决了，包含 div 的 line-height 本质上是 BR 高度，然后我可以行高单个元素
@Tom 你是什么意思？每个跨度已经有一个唯一的类名，所以你不能为每个跨度设置唯一的样式吗？
请看下面的答案，我最终做到了，但需要 2 级线高

【解决方案4】：

Tom，你尝试过使用 CSS line-height 吗？ link text

【讨论】：

【解决方案5】：

需要设置2级线高，容器内1级，每个跨度1级。

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

【讨论】：

【解决方案6】：

将<span>s 设为块级，并删除换行符：

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

【讨论】：