CSS: Wie fügt man Leerzeichen vor dem Inhalt eines Elements ein?

Question

Keiner der folgende Code funktioniert:

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

Wie füge ich weiß Raum vor Inhalt des Elements?

Hinweis: Ich muss den Rand links und den Rand links für semantische Verwendung färben und das Leerzeichen als farblosen Rand verwenden. :)

Answer 1

können Sie die Unicode eines Geschütztes Leerzeichen verwenden:

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

JSfiddle demo

[Stil verbessert @ Jason Sperske] Siehe

Answer 2

Sie hin und her sausen nicht mit Leerzeichen einfügen Zum einen wissen ältere Versionen von IE nicht, wovon Sie reden. Abgesehen davon gibt es im Allgemeinen sauberere Wege. Verwenden Sie für farblose Vertiefungen die text-indent-Eigenschaft.

p { text-indent: 1em; } 

JSFiddle demo

Edit:

Wenn Sie den Raum zu färbenden möchten, können Sie sich anschauen sollten einen dicken linken Rand mit dem ersten Buchstaben hinzufügen. (Ich würde fast, aber nicht ganz "stattdessen" sagen, denn der Einzug kann ein Problem sein, wenn Sie beides verwenden. Aber es fühlt sich für mich dreckig an, nur auf den Rand zum Einrücken zu vertrauen.) Sie können angeben, wie weit entfernt und wie breit die Farbe ist, verwendet den linken Rand des ersten Buchstaben/Polsterung/Rahmenbreite.

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

Demo

Answer 3

Da Sie für das Hinzufügen von Raum zwischen den Elementen suchen Sie etwas so einfach wie ein margin-left oder padding-left benötigen. Hier sind Beispiele für beide http://jsfiddle.net/BGHqn/3/

Diese 10 Pixel links von dem Absatzelement hinzufügen wird

p { 
    margin-left: 10px; 
} 

oder wenn Sie nur etwas Padding in Ihrem Absatzelement wollen

p { 
    padding-left: 10px; 
}