CSS: jak dodać spację przed zawartością elementu?

118

Żaden z poniższych kodów nie działa:

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

Jak dodać spację przed zawartością elementu?

Uwaga: muszę pokolorować obramowanie po lewej stronie i margines po lewej stronie do celów semantycznych i użyć spacji jako bezbarwnego marginesu. :)

— Hugolpz
źródło

5

Dlaczego nie dodać prostego marginesu.

— Cam

5

Może dlatego, że margines / dopełnienie wpływa na cały blok. Wcięcie tekstu byłoby lepszym wyborem

— niezły tyłek

Muszę pokolorować lewy brzeg i lewy margines dla celów semantycznych :) Mogę też dodać kilka element:before { content:"[a kind of space]"; background: mycolor;}. Na wszystkie sposoby chciałem wiedzieć, jak dodawać spacje, trochę fajnie!

— Hugolpz

1

@Hugolpz: Zasadniczo możesz zrobić to samo z p:first-letter { border-left: 1ex solid mycolor; }.

— cHao

Marginesy @carn są statyczne, szerokość spacji zależy od rozmiaru czcionki

— niezbyt lubiany

248

Możesz użyć unikodu nierozdzielającej spacji:

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

Zobacz demo JSfiddle

[styl ulepszony przez @Jason Sperske]

— Hugolpz
źródło

2

Zrobiłem niewielką edycję, żebyś mógł zobaczyć efekt: jsfiddle.net/uMFHH/3 (w przeciwnym razie wygląda to jak margines, co powoduje dobre pytanie, dlaczego nie dodać marginesu?)

— Jason Sperske

Bo muszę pokolorować border-left i margin-left :)

— Hugolpz

3

Dlaczego przestrzeń na końcu "\00a0 "? Czy to konieczne, czy możemy po prostu zrobić "\00a0"?

— jbyrd

1

@jbyrd: niepotrzebne (patrz jsfiddle.net/nhyw6e9q ). Zostawiłem to tam, aby pokazać, że normalna przestrzeń nie jest uwzględniana.

— Hugolpz

40

Nie pierdź, wstawiając spacje. Po pierwsze, starsze wersje IE nie będą wiedzieć, o czym mówisz. Poza tym ogólnie istnieją czystsze sposoby.

W przypadku wcięć bezbarwnych użyj text-indentwłaściwości.

p { text-indent: 1em; }

Demo JSFiddle

Edytować:

Jeśli chcesz, aby przestrzeń była pokolorowana, możesz rozważyć dodanie grubej lewej krawędzi do pierwszej litery. (Prawie - ale nie - powiedziałbym „zamiast tego”, ponieważ wcięcie może stanowić problem, jeśli używasz obu. Ale to dla mnie nieprzyjemne, gdybym polegał wyłącznie na granicy wcięcia.) Możesz określić, jak daleko i jak szeroki jest kolor przy użyciu lewego marginesu / dopełnienia / szerokości obramowania pierwszej litery.

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

Próbny

— cHao
źródło

2

Jeśli utkniesz z obsługą IE <8, ta metoda będzie działać, podczas gdy pseudoelementy przed / po nie będą działać.

— cimmanon

1

@cimmanon: Tak. Według MDN działa to nawet w IE 3 (chociaż nawet nie zdawałem sobie sprawy, że mieli wtedy CSS: P).

— cHao

Nie możesz pokolorować takiego wcięcia { text-indent: 1em; }. Ale możemy pokolorować taką przestrzeń :before {content: "\00a0 "; background: #000; }. Zobacz Fiddle

— Hugolpz

1

@Hugolpz: Wcięcie w tekście? Nie. nie mogę pokolorować tak inaczej, AFAIK. Ale granica? Pewnie. :)

— cHao

Och, nie możemy dodać kilku treści, zobacz Fiddle . Szkoda ...

— Hugolpz

8

Ponieważ chcesz dodać odstępy między elementami, możesz potrzebować czegoś tak prostego, jak margines lewy lub dopełnienie lewy. Oto przykłady zarówno http://jsfiddle.net/BGHqn/3/

Spowoduje to dodanie 10 pikseli po lewej stronie elementu akapitu

p {
    margin-left: 10px;
 }

lub jeśli chcesz po prostu dopełnić element akapitu

p {
    padding-left: 10px;
}

— Matt
źródło

6

/* 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 */
}

— Piyush
źródło