CSS: come aggiungere uno spazio bianco prima del contenuto dell'elemento?

118

Nessuno dei seguenti codici funziona:

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

Come aggiungo uno spazio bianco prima del contenuto dell'elemento?

Nota: devo colorare il bordo sinistro e il margine sinistro per uso semantico e utilizzare lo spazio come margine incolore. :)

— Hugolpz
fonte

5

Perché non aggiungere semplicemente un semplice margine.

— Cam

5

Forse perché il margine / riempimento influisce sull'intero blocco. text-indent sarebbe una scelta migliore

— bel culo

Devo colorare il bordo sinistro e il margine sinistro per uso semantico :) Potrei aggiungerne anche diversi element:before { content:"[a kind of space]"; background: mycolor;}. In tutti i modi volevo sapere un modo per aggiungere spazi, un po 'divertente!

— Hugolpz

1

@ Hugolpz: potresti fare praticamente la stessa cosa con p:first-letter { border-left: 1ex solid mycolor; }.

— cHao

I margini di @carn sono statici, la larghezza dello spazio è relativa alla dimensione del carattere

— Non amato

248

Puoi usare l'unicode di uno spazio unificatore:

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

Guarda la demo di JSfiddle

[stile migliorato da @Jason Sperske]

— Hugolpz
fonte

2

Ho apportato una leggera modifica in modo da poter vedere il suo effetto: jsfiddle.net/uMFHH/3 (altrimenti sembra solo un margine, il che fa apparire una buona domanda, perché non aggiungere semplicemente un margine?)

— Jason Sperske

Perché ho bisogno di colorare il bordo sinistro e il margine sinistro :)

— Hugolpz

3

Perché lo spazio alla fine di "\00a0 "? È necessario o possiamo semplicemente farlo "\00a0"?

— jbyrd

1

@jbyrd: non necessario (vedi jsfiddle.net/nhyw6e9q ). L'ho lasciato lì per mostrare che lo spazio normale non viene considerato.

— Hugolpz

40

Non scoreggiare inserendo spazi. Per prima cosa, le versioni precedenti di IE non sapranno di cosa stai parlando. Oltre a questo, però, ci sono modi più puliti in generale.

Per i rientri incolori, usa la text-indentproprietà.

p { text-indent: 1em; }

Demo di JSFiddle

Modificare:

Se vuoi che lo spazio sia colorato, potresti considerare di aggiungere un bordo sinistro spesso alla prima lettera. (Direi quasi ma non del tutto "invece", perché il rientro può essere un problema se li usi entrambi. Ma mi sembra sporco fare affidamento esclusivamente sul bordo per il rientro.) Puoi specificare quanto lontano e quanto è largo, il colore utilizza il margine sinistro / riempimento / larghezza del bordo della prima lettera.

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

dimostrazione

— CHAO
fonte

2

Se sei bloccato a supportare IE <8, questo metodo funzionerà mentre gli pseudo elementi prima / dopo non lo faranno.

— cimmanon

1

@cimmanon: Sì. Secondo MDN, funziona anche in IE 3 (anche se all'epoca non mi ero nemmeno reso conto che avessero CSS: P).

— cHao

Non puoi colorare una rientranza simile { text-indent: 1em; }. Ma possiamo colorare uno spazio simile :before {content: "\00a0 "; background: #000; }. Vedi Fiddle

— Hugolpz

1

@ Hugolpz: un rientro del testo? No. non posso colorare in modo diverso, AFAIK. Ma un confine? Sicuro. :)

— cHao

Oh, non possiamo aggiungere più contenuti, vedi Fiddle . Peccato ...

— Hugolpz

8

Dato che stai cercando di aggiungere spazio tra gli elementi, potresti aver bisogno di qualcosa di semplice come un margine sinistro o un riempimento sinistro. Ecco alcuni esempi di entrambi http://jsfiddle.net/BGHqn/3/

Questo aggiungerà 10 pixel a sinistra dell'elemento paragrafo

p {
    margin-left: 10px;
 }

o se vuoi solo un po 'di riempimento all'interno del tuo elemento paragrafo

p {
    padding-left: 10px;
}

— opaco
fonte

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
fonte