2013-05-14 7 views
76

Keiner der folgende Code funktioniert:CSS: Wie fügt man Leerzeichen vor dem Inhalt eines Elements ein?

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. :)

+4

Warum nicht einfach hinzufügen einfacher Rand. – Cam

+4

Vielleicht weil margin/padding den ganzen Block betrifft. Text-Einrückung wäre eine bessere Wahl –

+0

Ich muss den Rand-links und den Rand-links für semantische Verwendung färben :) Ich kann mehrere 'element: vor {content:" [eine Art von Leerzeichen] "; Hintergrund: Mycolor;}. Alle Wege, auf denen ich einen Weg zum Hinzufügen von Räumen kennenlernen wollte, ein bisschen Spaß! – Hugolpz

Antwort

170

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

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

JSfiddle demo

[Stil verbessert @ Jason Sperske] Siehe

+2

Ich machte eine leichte Bearbeitung, so dass Sie sehen können, ist der Effekt: http://jsfiddle.net/uMFHH/3/ (sonst sieht es einfach wie ein Rand, der bringt eine gute Frage, warum nicht einfach einen Rand hinzufügen?) –

+0

+1 für eine gute Antwort. –

+0

Da muss ich die Grenze links und den Rand links färben :) – Hugolpz

31

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

+2

Wenn Sie nicht mehr IE unterstützt <8, wird diese Methode funktionieren, während vor/nach Pseudo-Elemente nicht. – cimmanon

+1

@cimmanon: Ja. Laut MDN funktioniert das sogar im IE 3 (obwohl ich nicht einmal bemerkt habe, dass * sie * CSS damals hatten: P). – cHao

+0

+1 für eine gute Antwort. –

7

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; 
}