填充一段文本的彩色背景？答案

【问题标题】：Padding the colored background of a span of text?填充一段文本的彩色背景？
【发布时间】：2013-08-23 07:40:53
【问题描述】：

我有一个很长的白色文本段落（内联元素），可以跨越几行，在黑色背景上 - 不是整个框的背景，而是文本本身的背景。为此，我将文本放入具有颜色和背景颜色规范的元素中。

我想在文本的黑色背景边缘和字母之间留出一些水平空间。当我向跨度添加填充时，左右填充仅出现在整个的第一个和最后一个字符之前和之后，但不在每行的开头，我希望每行以一些空格开始和结束到黑色背景的边缘。

文字是连续不断变化的（而且字母不是固定空格）所以我不能人为地添加元素到每行的开头和结尾，这是迄今为止我能够找到的唯一方法来创建该空间。

真的不可能在每行的开头和结尾留出一个行内流动的文本吗？

【问题讨论】：

标签： html css

【解决方案1】：

不在span 标签上，使用p 标签或将其放入div。

填充和边距不能应用于跨度

【讨论】：

【解决方案2】：

正如 C. Malet 所说，span 不可能，因为它是内联的。如果您使用div 或p 或css 属性“display:block”，则背景将作为整体应用，但不会应用于每一行..

【讨论】：

【解决方案3】：

感谢您的回答。我找到了一种方法，方法是将跨度嵌套在两个额外的跨度内，并在右侧和左侧有偏移：

.theSpan { position: relative; right: 5px; background-color: #000000; color: #ffffff; } 
.outer1 { position: relative; background-color: #000000; }
.outer2 { position: relative; left: 10px; background-color: #000000; }

【讨论】：