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

Question

Aucun des codes suivants ne fonctionne :

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

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

Note : Je dois colorer la bordure gauche et la marge gauche pour des raisons de sémantique et utiliser l'espace comme marge incolore :)

Answer 1

Vous pouvez utiliser l'unicode d'un espace non cassant :

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

Voir Démonstration de JSfiddle

[style amélioré par @Jason Sperske]

Answer 2

Ne faites pas l'erreur d'insérer des espaces. D'une part, les anciennes versions d'IE ne sauront pas de quoi il s'agit. En dehors de cela, il existe des méthodes plus propres en général.

Pour les retraits incolores, utilisez l'option text-indent propriété.

p { text-indent: 1em; }

Démonstration de JSFiddle

Edit :

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

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

Démo

Answer 3

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

Answer 4

Comme vous cherchez à ajouter de l'espace entre les éléments, vous pouvez avoir besoin de quelque chose d'aussi simple qu'une marge gauche ou un renfort gauche. Voici des exemples des deux http://jsfiddle.net/BGHqn/3/

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

p {
    margin-left: 10px;
 }

ou si vous voulez simplement un peu de rembourrage dans votre élément de paragraphe

p {
    padding-left: 10px;
}