web-dev-qa-db-ja.com

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

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

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

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

注：セマンティック用にボーダー左とマージン左に色を付け、スペースを無色のマージンとして使用する必要があります。 :)

cssunicodespacecss-content
98
Hugolpz

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

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

JSfiddle demoを参照してください

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

211
Hugolpz

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

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

p { text-indent: 1em; }

JSFiddleデモ

編集：

スペースに色を付けたい場合は、最初の文字に太い左ボーダーを追加することを検討してください。 （両方を使用するとインデントが問題になる可能性があるため、「代わりに」と言ってもほぼ間違いありません。しかし、インデントするために境界線だけに頼るのは気分が悪くなります。） 、および幅は、最初の文字の左マージン/パディング/境界線の幅を使用しています。

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

デモ

34
cHao

要素間にスペースを追加する必要があるため、左マージンまたはパディング左のような単純なものが必要になる場合があります。以下に両方の例を示します http://jsfiddle.net/BGHqn/3/

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

p {
    margin-left: 10px;
 }

または段落要素内にパディングが必要な場合

p {
    padding-left: 10px;
}
7
Matt
/* 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 */
}
3
Piyush