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

Question

以下代码均不起作用:

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

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

注意:我需要为border-left和margin-left上色以进行语义使用,并将空格用作无色边距.:)

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

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

Answer 4

由于您正在寻找在元素之间添加空间,因此您可能需要像边距左侧或填充左侧那样简单的内容.以下是http://jsfiddle.net/BGHqn/3/的示例

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

p {
    margin-left: 10px;
 }

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

p {
    padding-left: 10px;
}