CSS：如何在元素内容之前添加空格？答案

【问题标题】：CSS: how to add white space before element's content?CSS：如何在元素内容之前添加空格？
【发布时间】：2013-05-09 06:40:33
【问题描述】：

以下代码均无效：

p:before { content: " "; }
p:before { content: "&nbsp;"; }

如何在元素内容前添加空格？

注意：我需要为左边框和左边框着色以供语义使用，并将空格用作无色边距。 :)

【问题讨论】：

为什么不只添加简单的边距。
可能是因为边距/填充会影响整个块。 text-indent 会是更好的选择
我需要为左边框和左边框着色以供语义使用:) 我也可以添加几个element:before { content:"[a kind of space]"; background: mycolor;}。各种方式我都想知道一种添加空间的方法，还挺有趣的！
@Hugolpz：你可以用p:first-letter { border-left: 1ex solid mycolor; }做基本相同的事情。
@carn 边距是静态的，空间宽度是相对于字体大小的

标签： css unicode space css-content

【解决方案1】：

/* Most Accurate Setting if you only want
   to do this with CSS Pseudo Element */
p:before { 
   content: "\00a0";
   padding-right: 5px; /* If you need more space b/w contents */
}

【讨论】：

【解决方案2】：

您可以使用不间断空格的 unicode：

p:before { content: "\00a0 "; }

见JSfiddle demo

[@Jason Sperske 改进的风格]

【讨论】：

我做了一个小修改，你可以看到它的效果：jsfiddle.net/uMFHH/3（否则它看起来就像一个边距，这提出了一个很好的问题，为什么不只是添加一个边距？）
因为我需要为左边框和左边框着色:)
"\00a0 " 末尾为什么有空格？这是必要的还是我们可以做"\00a0"？
@jbyrd：没有必要（见jsfiddle.net/nhyw6e9q）。我把它留在那里是为了表明没有考虑正常空间。

【解决方案3】：

不要乱插空格。一方面，旧版本的 IE 不知道你在说什么。不过，除此之外，通常还有更清洁的方法。

对于无色缩进，使用text-indent 属性。

p { text-indent: 1em; }

JSFiddle demo

编辑：

如果您希望为空间着色，您可以考虑在第一个字母上添加粗左边框。（我几乎但不完全说“相反”，因为如果您同时使用两者，缩进可能是一个问题。但我觉得完全依靠边框来缩进很脏。）您可以指定多远，以及颜色使用第一个字母的左边距/填充/边框宽度有多宽。

p:first-letter { border-left: 1em solid red; }

Demo

【讨论】：

如果你被 IE
@cimmanon：是的。根据 MDN，这甚至在 IE 3 中也有效（尽管我什至没有意识到他们当时有 CSS：P）。
您不能为{ text-indent: 1em; } 之类的缩进着色。但是我们可以为:before {content: "\00a0 "; background: #000; } 这样的空间着色。 See Fiddle
@Hugolpz：文本缩进？没有。不能用不同的颜色，AFAIK。但是a border? Sure. :)
哦，我们不能添加多个内容，see Fiddle。太糟糕了...

【解决方案4】：

由于您正在寻找在元素之间添加空间，您可能需要像左边距或左边距一样简单的东西。以下是http://jsfiddle.net/BGHqn/3/ 的示例

这将在段落元素的左侧增加 10 个像素

p {
    margin-left: 10px;
 }

或者如果您只想在段落元素中添加一些填充

p {
    padding-left: 10px;
}

【讨论】：