CSS: comment ajouter un espace blanc avant le contenu de l'élément?

Aucun des codes suivants ne fonctionne:

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

Comment ajouter un espace blanc avant le contenu de l'élément?

Remarque: je dois colorier la bordure gauche et la marge gauche pour une utilisation sémantique et utiliser l'espace comme marge incolore. :)

Vous pouvez utiliser l'unicode d'un espace insécable:

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

Voir la démo de JSfiddle

[style amélioré par @Jason Sperske]

Ne pétez pas en insérant des espaces. D'une part, les anciennes versions d'IE ne sauront pas de quoi vous parlez. En plus de cela, il existe des moyens plus propres en général.

Pour les retraits incolores, utilisez la text-indentpropriété.

p { text-indent: 1em; }

Démo JSFiddle

Éditer:

Si vous souhaitez que l'espace soit coloré, vous pouvez envisager d'ajouter une bordure gauche épaisse à la première lettre. (Je dirais presque, mais pas tout à fait, "à la place", car le retrait peut être un problème si vous utilisez les deux. Mais cela me semble sale de me fier uniquement à la bordure pour mettre en retrait.) Vous pouvez spécifier à quelle distance et la largeur de la couleur en utilisant la marge gauche / le remplissage / la largeur de la bordure de la première lettre.

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

Démo

Puisque vous cherchez à ajouter de l'espace entre les éléments, vous aurez peut-être besoin de quelque chose d'aussi simple qu'une marge gauche ou un remplissage gauche. Voici des exemples des deux http://jsfiddle.net/BGHqn/3/

Cela ajoutera 10 pixels à gauche de l'élément de paragraphe

p {
    margin-left: 10px;
 }

ou si vous voulez juste un peu de remplissage dans votre élément de paragraphe

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