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

Question

Nessuno del seguente codice funziona:

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

Come posso aggiungere uno spazio vuoto prima del contenuto dell'elemento?

Nota: ho bisogno di colorare il bordo sinistro e il margine sinistro per l'uso semantico e utilizzare lo spazio come margine incolore. :)

Answer 1

È possibile utilizzare l'Unicode di uno spazio unificatore:

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

Vedi JSfiddle demo

[stile è migliorato di @ Jason Sperske]

Answer 2

Non scoreggia in giro con inserire spazi. Per uno, versioni precedenti di IE non sapranno di cosa stai parlando. Oltre a ciò, tuttavia, ci sono modi più puliti in generale.

Per i rientri incolori, utilizzare la proprietà text-indent.

p { text-indent: 1em; } 

JSFiddle demo

Edit:

Se si vuole lo spazio per essere colorato, si potrebbe prendere in considerazione l'aggiunta di un bordo spesso di sinistra alla prima lettera. (Direi quasi-ma-non-dire "invece", perché il rientro può essere un problema se si usano entrambi, ma mi sembra sporco affidarmi esclusivamente al margine per rientrare.) Puoi specificare quanto lontano e quanto è largo, il colore sta usando il margine sinistro della prima lettera/spaziatura/larghezza del bordo.

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

Demo

Answer 3

Dal momento che si sta cercando per l'aggiunta di spazio tra gli elementi potrebbe essere necessario qualcosa di semplice come un margin-left o padding-left. Ecco alcuni esempi di entrambi http://jsfiddle.net/BGHqn/3/

Questo aggiungerà 10 pixel alla sinistra dell'elemento paragrafo

p { 
    margin-left: 10px; 
} 

o se volete solo alcuni padding all'interno del vostro elemento paragrafo

p { 
    padding-left: 10px; 
}