CSS: ¿cómo agregar espacios en blanco antes del contenido del elemento?

Ninguno de los siguientes códigos funciona:

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

¿Cómo agrego espacios en blanco antes del contenido del elemento?

Nota: Necesito colorear el borde izquierdo y el margen izquierdo para uso semántico y usar el espacio como margen incoloro. :)

Puede utilizar el Unicode de un espacio que no se rompe:

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

Ver demostración de JSfiddle

[estilo mejorado por @Jason Sperske]

No se tire un pedo con espacios de inserción. Por un lado, las versiones anteriores de IE no sabrán de qué estás hablando. Sin embargo, además de eso, hay formas más limpias en general.

Para sangrías incoloras, use la text-indentpropiedad.

p { text-indent: 1em; }

Demostración de JSFiddle

Editar:

Si desea que el espacio sea coloreado, podría considerar agregar un borde izquierdo grueso a la primera letra. (Casi, pero no del todo, diría "en su lugar", porque la sangría puede ser un problema si usa ambos. Pero me parece sucio depender únicamente del borde para sangrar). Puede especificar qué tan lejos y qué tan ancho, el color está usando el margen izquierdo / relleno / ancho del borde de la primera letra.

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

Manifestación

Dado que está buscando agregar espacio entre elementos, es posible que necesite algo tan simple como un margen izquierdo o un relleno izquierdo. Aquí hay ejemplos de http://jsfiddle.net/BGHqn/3/

Esto agregará 10 píxeles a la izquierda del elemento de párrafo

p {
    margin-left: 10px;
 }

o si solo desea algo de relleno dentro de su elemento de párrafo

p {
    padding-left: 10px;
}

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