web-dev-qa-db-fra.com

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

Aucun des codes suivants ne fonctionne:

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

Comment puis-je ajouter des espaces 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. :)

cssunicodespacecss-content
98
Hugolpz

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

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

Voir démo de JSfiddle

[style amélioré par @Jason Sperske]

211
Hugolpz

Ne pas péter avec l'insertion d'espaces. D'une part, les anciennes versions de IE ne sauront pas de quoi vous parlez. En plus de cela, cependant, il existe des méthodes plus propres en général.

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

_p { text-indent: 1em; }
_

démo JSFiddle

Modifier:

Si vous souhaitez que l'espace soit coloré, vous pouvez envisager d'ajouter une bordure épaisse à gauche à 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 je trouve ça 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 largeur/marge/marge de gauche de la première lettre.

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

démo

34
cHao

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 une marge à 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 juste du rembourrage dans votre élément de paragraphe

p {
    padding-left: 10px;
}
7
Matt
/* 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 */
}
3
Piyush