影响背景颜色的行高答案

【问题标题】：Line-height affecting background color影响背景颜色的行高
【发布时间】：2012-05-30 20:46:20
【问题描述】：

我在一个 div 内有几行文本，它们可以交替背景颜色以使其更易于阅读。每个都有一个 display: block;属性，因此背景颜色跨越 div 的整个宽度。

但是，这会使每一行文本相距甚远。如果我用 line-height 将线条拉得更近，背景颜色将不再适当地覆盖文本。

这是一张显示正在发生的事情的图片：

有没有人有任何关于如何让它看起来像原版的建议，减去行之间的空间？

编辑：这是一个 jfiddle 示例：http://jsfiddle.net/f8K3T/

【问题讨论】：

标签： html css

【解决方案1】：

您的标记中有明确的换行符。

这些具有非零高度，因此存在间隙。

我叉了你的小提琴：http://jsfiddle.net/zmA8N/

我想这就是你所追求的。

【讨论】：

【解决方案2】：

您可以在文本元素上使用 margin-top 和 margin-bottom 使它们靠得更近。
还要确保 padding:0;

如果您提供 css 样本或 JS 小提琴，我可以给出准确的值

【讨论】：

【解决方案3】：

您可以改为使用 css 属性 height: #px;而是在 div 元素上，而不是定义行高。

【讨论】：

【解决方案4】：

删除<br /> 标签，如so

如果你想要行之间的间距，只需添加：span{ margin-bottom: 3px; }

【讨论】：