que - CSS: ¿cómo agregar espacio en blanco antes del contenido del elemento?

salto de linea html sin br

Question

Ninguno de los siguientes códigos funciona:

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

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

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

Answer 1

No te enojes con la inserción de espacios. Por un lado, las versiones anteriores de IE no sabrán de lo que estás hablando. Además de eso, sin embargo, hay maneras más limpias en general.

Para sangrías incoloras, use la propiedad de text-indent .

p { text-indent: 1em; }

Demostración de JSFiddle

Editar:

Si desea que el espacio se coloree, puede considerar agregar un borde izquierdo grueso a la primera letra. (Casi diría "en su lugar", porque la sangría puede ser un problema si usa ambas. Pero me parece sucio confiar únicamente en el borde al guión). Puede especificar a qué distancia , y qué tan ancho, el color está usando la primera letra del margen izquierdo / relleno / ancho del borde.

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

Demo

Answer 2

Puede usar el Unicode de un espacio sin interrupción:

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

Ver demostración de JSfiddle

[estilo mejorado por @Jason Sperske]

Answer 3

Ya que está buscando agregar espacio entre los elementos, es posible que necesite algo tan simple como un margen izquierdo o un margen izquierdo. Aquí hay ejemplos de ambos 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 quieres algo de relleno dentro de tu elemento de párrafo

p {
padding-left: 10px;
}