CSS：要素のコンテンツの前に空白を追加する方法は？

次のコードはどれも機能しません。

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

要素のコンテンツの前に空白を追加するにはどうすればよいですか？

注：セマンティックに使用するためにborder-leftおよびmargin-leftに色を付け、スペースを無色のマージンとして使用する必要があります。:)

改行しないスペースのユニコードを使用できます：

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

JSfiddleデモを見る

[@Jason Sperskeによってスタイルが改善されました]

スペースを挿入することでおならをしないでください。まず、古いバージョンのIEはあなたが何を話しているのかわかりません。それ以外にも、一般的にはよりクリーンな方法があります。

無色のインデントには、text-indentプロパティを使用します。

p { text-indent: 1em; }

JSFiddleデモ

編集：

スペースに色を付ける場合は、最初の文字に太い左枠を追加することを検討してください。（インデントは両方を使用すると問題になる可能性があるので、ほとんどではありませんが「代わりに」と言います。しかし、インデントの境界のみに依存するのは私には不愉快です。） 、および幅は、最初の文字の左マージン/パディング/ボーダー幅を使用しています。

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

デモ

要素間にスペースを追加しようとしているので、margin-leftまたはpadding-leftのような単純なものが必要になる場合があります。ここに両方の​​例がありますhttp://jsfiddle.net/BGHqn/3/

これにより、段落要素の左側に10ピクセルが追加されます

p {
    margin-left: 10px;
 }

または、段落要素内にいくつかのパディングが必要な場合

p {
    padding-left: 10px;
}

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