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

118

Aucun des codes suivants ne fonctionne:

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

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. :)

— Hugolpz
source

5

Pourquoi ne pas simplement ajouter une marge simple.

— Came

5

Peut-être parce que la marge / le remplissage affecte le bloc entier. text-indent serait un meilleur choix

— beau cul

J'ai besoin de colorer la bordure gauche et la marge gauche pour une utilisation sémantique :) Je peux aussi en ajouter plusieurs element:before { content:"[a kind of space]"; background: mycolor;}. De toutes les manières, je voulais connaître un moyen d'ajouter des espaces, plutôt amusant!

— Hugolpz

1

@Hugolpz: Vous pourriez faire la même chose avec p:first-letter { border-left: 1ex solid mycolor; }.

— cHao

Les marges de @carn sont statiques, la largeur de l'espace est relative à la taille de la police

— Pas aimé

248

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]

— Hugolpz
source

2

J'ai fait une légère modification pour que vous puissiez voir son effet: jsfiddle.net/uMFHH/3 (sinon cela ressemble juste à une marge, ce qui soulève une bonne question, pourquoi ne pas simplement ajouter une marge?)

— Jason Sperske

Parce que j'ai besoin de colorer la bordure gauche et la marge gauche :)

— Hugolpz

3

Pourquoi l'espace à la fin "\00a0 "? Est-ce nécessaire ou pouvons-nous simplement le faire "\00a0"?

— jbyrd

1

@jbyrd: pas nécessaire (voir jsfiddle.net/nhyw6e9q ). Je l'ai laissé là pour montrer que l'espace normal n'est pas pris en compte.

— Hugolpz

40

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

— cHao
source

2

Si vous êtes bloqué avec IE <8, cette méthode fonctionnera alors que les pseudo éléments avant / après ne le seront pas.

— cimmanon

1

@cimmanon: Oui. Selon MDN, cela fonctionne même dans IE 3 (même si je ne savais même pas qu'ils avaient CSS à l'époque: P).

— cHao

Vous ne pouvez pas colorer une telle indentation { text-indent: 1em; }. Mais on peut colorer un espace tel :before {content: "\00a0 "; background: #000; }. Voir Fiddle

— Hugolpz

1

@Hugolpz: Un retrait de texte? Nan. ne peut pas colorer cela différemment, AFAIK. Mais une frontière? Sûr. :)

— cHao

Oh, nous ne pouvons pas ajouter plusieurs contenus, voir Fiddle . Dommage ...

— Hugolpz

8

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;
}

— Mat
source

6

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

— Piyush
source