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


Keiner der folgenden Codes funktioniert:

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

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

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


84
2018-05-14 20:36


Ursprung


Antworten:


Sie können den Unicode eines nicht brechenden Space verwenden:

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

Sehen JSfiddle Demo

[Stil verbessert von @Jason Sperske]


185
2018-05-14 20:36



Furz nicht herum mit Leerzeichen einfügen. Zum einen wissen ältere Versionen von IE nicht, wovon Sie reden. Abgesehen davon gibt es im Allgemeinen sauberere Wege.

Für farblose Vertiefungen verwenden Sie die text-indent Eigentum.

p { text-indent: 1em; }

JSFiddle-Demo

Bearbeiten:

Wenn Sie möchten, dass der Bereich eingefärbt wird, können Sie dem ersten Buchstaben einen dicken linken Rahmen 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


32
2018-05-14 20:40



Da Sie nach Leerzeichen zwischen den Elementen suchen, benötigen Sie möglicherweise etwas, das so einfach ist wie ein Rand links oder Padding-links. Hier sind Beispiele für beides http://jsfiddle.net/BGHqn/3/

Dadurch werden links vom Absatzelement 10 Pixel hinzugefügt

p {
    margin-left: 10px;
 }

oder wenn Sie nur eine Auffüllung in Ihrem Absatzelement wünschen

p {
    padding-left: 10px;
}

7
2018-05-14 21:00