CSS：如何在元素的内容之前添加空白？

以下代码均不起作用：

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

如何在元素内容之前添加空白区域？

注意：我需要给边界左边和边缘左边的颜色着色，并将空间用作无色边缘。 🙂

Answer 1

你可以使用非破坏空间的unicode：

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

看JSfiddle演示

[风格由@Jason Sperske改进]

Answer 2

不要插入空格放屁。 对于一个，旧版本的IE不知道你在说什么。 除此之外，总的来说还有更清洁的方法。

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

 p { text-indent: 1em; } 

JSFiddle演示

编辑：

如果你想要空间被着色，你可以考虑在第一个字母上加一个粗的左边框。 （我几乎 – 但不是相当的说“，因为缩进可以是一个问题，如果你同时使用它，但我觉得肮脏的只依靠边界缩进）。你可以指定多远，以及多宽，颜色使用第一个字母的左边距/填充/边框宽度。

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

演示

Answer 3

既然你正在寻找在元素之间增加空间，你可能需要一些简单的东西，比如左边的空白或左边的填充。 这里是http://jsfiddle.net/BGHqn/3/的例子;

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

 p { margin-left: 10px; } 

或者如果你只是想在你的段落元素内填充一些内容

 p { padding-left: 10px; }