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

118

以下代码均无效：

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

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

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

— 雨果
source

5

为什么不增加简单的边距。

— 凸轮

5

可能是因为边距/填充会影响整个块。文字缩进将是一个更好的选择

— 不错的屁股

为了语义使用，我需要给左边框和左边框上色：)我也可以添加一些颜色element:before { content:"[a kind of space]"; background: mycolor;}。我想知道所有添加空间的方法，这很有趣！

— 2013年

1

@Hugolpz：您可以使用进行基本相同的操作p:first-letter { border-left: 1ex solid mycolor; }。

— cHao

@carn边距是静态的，空间宽度是相对于字体大小

— 不喜爱

248

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

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

参见JSfiddle演示

[@Jason Sperske改进的样式]

— 雨果
source

2

我进行了少许编辑，以便您可以看到它的效果：jsfiddle.net/uMFHH/3（否则它看起来像是一个边距，这提出了一个很好的问题，为什么不增加边距？）

— Jason Sperske

因为我需要给左边框和左边框加上颜色:)

— Hugolpz 2013年

3

为什么空格结尾"\00a0 "？那是必要的还是我们可以做"\00a0"？

— jbyrd

1

@jbyrd：不必要（请参阅jsfiddle.net/nhyw6e9q）。我将其留在此处以表明未考虑正常空间。

— Hugolpz

40

不要在空格处放屁。首先，旧版本的IE不会知道您在说什么。但是除此之外，通常还有更清洁的方法。

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

p { text-indent: 1em; }

JSFiddle演示

编辑：

如果要给空间上色，可以考虑在第一个字母上添加粗的左边框。（我几乎但不是很想说“相反”，因为如果同时使用缩进，则缩进可能会成为问题。但是，仅依靠边框来缩进对我来说是肮脏的。）您可以指定距离多远以及颜色的宽度，它使用的是第一个字母的左边距/填充/边框宽度。

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

演示版

— H
source

2

如果您坚持支持IE <8，则此方法将起作用，而伪元素之前/之后将不起作用。

— cimmanon

1

@cimmanon：是的。根据MDN的说法，即使在IE 3中也可以使用（尽管我什至还没有意识到他们当时的 CSS：P）。

— cHao

您不能为这样的压痕着色{ text-indent: 1em; }。但是我们可以给这样的空间上色:before {content: "\00a0 "; background: #000; }。参见Fiddle

— Hugolpz，

1

@Hugolpz：文字缩进？不。不能用不同的颜色着色，AFAIK。但是有边界吗？当然。 :)

— cHao

哦，我们不能添加几个内容，请参阅Fiddle。太糟糕了

— Hugolpz

8

由于您要在元素之间增加空间，因此您可能需要像margin-left或padding-left这样简单的内容。这是http://jsfiddle.net/BGHqn/3/的示例

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

p {
    margin-left: 10px;
 }

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

p {
    padding-left: 10px;
}

— 马特
source

5

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

— 皮尤什
source