it-swarm.com.de

CSS: Wie füge ich Leerzeichen vor dem Inhalt des Elements hinzu?

Keiner der folgenden Codes funktioniert:

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

Wie füge ich Leerzeichen vor dem Inhalt des Elements hinzu?

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

98
Hugolpz

Sie können den Unicode eines nicht unterbrechenden Leerzeichens verwenden:

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

Siehe JSfiddle-Demo

[Stil von Jason Sperske verbessert]

211
Hugolpz

Furz nicht mit dem Einfügen von Leerzeichen herum. Zum einen werden ältere Versionen von IE nicht wissen, wovon Sie sprechen. Abgesehen davon gibt es jedoch allgemein sauberere Möglichkeiten.

Verwenden Sie für farblose Einzüge die Zeichen text-indent Eigenschaft.

p { text-indent: 1em; }

JSFiddle-Demo

Bearbeiten:

Wenn Sie möchten, dass das Leerzeichen farbig ist, können Sie dem ersten Buchstaben einen dicken linken Rand hinzufügen. (Ich würde fast - aber nicht ganz - "stattdessen" sagen, da der Einzug ein Problem sein kann, wenn Sie beide verwenden. Aber es fühlt sich für mich schmutzig an, sich nur auf den Rand zu verlassen, um einzurücken.) Sie können angeben, wie weit entfernt und wie breit die Farbe den linken Rand/Abstand/Randbreite des ersten Buchstabens verwendet.

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

Demo

34
cHao

Da Sie Leerzeichen zwischen Elementen einfügen möchten, benötigen Sie möglicherweise etwas so Einfaches wie einen linken Rand oder einen linken Abstand. Hier sind Beispiele für beide http://jsfiddle.net/BGHqn/3/

Dies fügt 10 Pixel links vom Absatzelement hinzu

p {
    margin-left: 10px;
 }

oder wenn Sie nur etwas Abstand in Ihrem Absatzelement wünschen

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