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

Posted 2023-02-16

【中文标题】CSS：如何在元素内容之前添加空格？

【英文标题】：CSS: how to add white space before element's content?

【发布时间】：2013-05-09 06:40:33

【问题描述】：

以下代码均无效：

p:before  content: " "; 
p:before  content: " "; 

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

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

【问题讨论】：

为什么不只添加简单的边距。

可能是因为边距/填充会影响整个块。 text-indent 会是更好的选择

我需要为左边框和左边框着色以供语义使用:) 我也可以添加几个element:before content:"[a kind of space]"; background: mycolor;。各种方式我都想知道一种添加空间的方法，还挺有趣的！

@Hugolpz：你可以用p:first-letter border-left: 1ex solid mycolor; 做基本相同的事情。

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

【参考方案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;