CSS: ¿cómo agregar espacios en blanco antes del contenido del elemento?

118

Ninguno de los siguientes códigos funciona:

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

¿Cómo agrego espacios en blanco antes del contenido del elemento?

Nota: Necesito colorear el borde izquierdo y el margen izquierdo para uso semántico y usar el espacio como margen incoloro. :)

— Hugolpz
fuente

5

¿Por qué no agregar un margen simple?

— Cam

5

Quizás porque el margen / relleno afecta a todo el bloque. sangría de texto sería una mejor opción

— buen culo

Necesito colorear el borde izquierdo y el margen izquierdo para uso semántico :) Puedo agregar varios element:before { content:"[a kind of space]"; background: mycolor;}también. De todas formas, quería saber una forma de agregar espacios, ¡un poco divertido!

— Hugolpz

1

@Hugolpz: Podrías hacer básicamente lo mismo con p:first-letter { border-left: 1ex solid mycolor; }.

— cHao

Los márgenes de @carn son estáticos, el ancho del espacio es relativo al tamaño de la fuente

— No me

248

Puede utilizar el Unicode de un espacio que no se rompe:

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

Ver demostración de JSfiddle

[estilo mejorado por @Jason Sperske]

— Hugolpz
fuente

2

Hice una pequeña edición para que pueda ver su efecto: jsfiddle.net/uMFHH/3 (de lo contrario, solo parece un margen, lo que genera una buena pregunta, ¿por qué no agregar un margen?)

— Jason Sperske

Porque necesito colorear el borde izquierdo y el margen izquierdo :)

— Hugolpz

3

¿Por qué el espacio al final de "\00a0 "? ¿Es eso necesario o simplemente podemos hacer "\00a0"?

— jbyrd

1

@jbyrd: no es necesario (consulte jsfiddle.net/nhyw6e9q ). Lo dejé allí para mostrar que el espacio normal no se contabiliza.

— Hugolpz

40

No se tire un pedo con espacios de inserción. Por un lado, las versiones anteriores de IE no sabrán de qué estás hablando. Sin embargo, además de eso, hay formas más limpias en general.

Para sangrías incoloras, use la text-indentpropiedad.

p { text-indent: 1em; }

Demostración de JSFiddle

Editar:

Si desea que el espacio sea coloreado, podría considerar agregar un borde izquierdo grueso a la primera letra. (Casi, pero no del todo, diría "en su lugar", porque la sangría puede ser un problema si usa ambos. Pero me parece sucio depender únicamente del borde para sangrar). Puede especificar qué tan lejos y qué tan ancho, el color está usando el margen izquierdo / relleno / ancho del borde de la primera letra.

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

Manifestación

— cHao
fuente

2

Si está atascado en el soporte de IE <8, este método funcionará mientras que los pseudo elementos antes / después no lo harán.

— cimmanon

1

@cimmanon: Sí. Según MDN, esto funciona incluso en IE 3 (aunque ni siquiera me di cuenta de que tenían CSS en ese entonces: P).

— cHao

No se puede colorear una sangría como esta { text-indent: 1em; }. Pero podemos colorear un espacio así :before {content: "\00a0 "; background: #000; }. Ver Fiddle

— Hugolpz

1

@Hugolpz: ¿Una sangría de texto? ¡No! no se puede colorear de manera diferente, AFAIK. ¿Pero una frontera? Por supuesto. :)

— cHao

Oh, no podemos agregar varios contenidos, vea Fiddle . Lástima ...

— Hugolpz

8

Dado que está buscando agregar espacio entre elementos, es posible que necesite algo tan simple como un margen izquierdo o un relleno izquierdo. Aquí hay ejemplos de http://jsfiddle.net/BGHqn/3/

Esto agregará 10 píxeles a la izquierda del elemento de párrafo

p {
    margin-left: 10px;
 }

o si solo desea algo de relleno dentro de su elemento de párrafo

p {
    padding-left: 10px;
}

— Mate
fuente

5

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