CSS: como adicionar espaço em branco antes do conteúdo do elemento?

Nenhum dos códigos a seguir funciona:

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

Como adiciono espaço em branco antes do conteúdo do elemento?

Observação: preciso colorir a borda esquerda e a margem esquerda para uso semântico e usar o espaço como margem incolor. :)

Você pode usar o Unicode de um espaço sem quebra:

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

Veja a demonstração JSfiddle

[estilo melhorado por @Jason Sperske]

Não se preocupe com a inserção de espaços. Por um lado, as versões mais antigas do IE não saberão do que você está falando. Além disso, porém, existem formas mais limpas em geral.

Para recuos incolores, use a text-indentpropriedade.

p { text-indent: 1em; }

JSFiddle demo

Editar:

Se quiser que o espaço seja colorido, você pode adicionar uma borda esquerda grossa à primeira letra. (Eu diria quase-mas-não-diria "em vez", porque o recuo pode ser um problema se você usar ambos. Mas parece sujo para mim confiar apenas na borda para recuar.) Você pode especificar a distância e a largura da cor usando a margem esquerda / preenchimento / largura da borda da primeira letra.

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

Demo

Como você está procurando adicionar espaço entre os elementos, pode precisar de algo tão simples como margin-left ou padding-left. Aqui estão alguns exemplos de http://jsfiddle.net/BGHqn/3/

Isso adicionará 10 pixels à esquerda do elemento do parágrafo

p {
    margin-left: 10px;
 }

ou se você quiser apenas algum preenchimento dentro do seu elemento de parágrafo

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