espacio en html

Hay veces que necesitamos añadir un espacio en blanco en html y nunca te acuerdas de como es el código. Por eso voy a darte un pequeño truquillo para que te acuerde siempre de cómo poner un espacio en html. Acuérdate de las letras “nbsp”, que significa Non Breaking Space, Espacio no partible.

Espacio en blanco en html:  

El uso del código HTML para hacer espacio en blanco es  bien sencillo, simplemente es el siguiente:

Espacio en html
 

tal cuál, con el símbolo & al principio y el símbolo ; al final

Pero no siempre el uso del espacio en blanco en HTML, es la mejor solución, hay veces que el uso de CSS, para dar un estilo o diseño más atractivo a tu web, resulta ser la mejor forma para dar espacio. ¿Cómo hacer un espacio en HTML sin dejar el código sucio? ¿Cómo ponemos varios espacio en HTML y que estos aparezcan en el front?  Estas son algunas de las preguntas que recibo habitualmente y  con el fin de resolverlas, hoy vamos a verlo.

Pero antes de darte un poco más de información  sobre los espacios en blanco, veamos que es y como funciona.

 

Qué es un espacio en blanco en HTML y cómo funciona

Un espacio en blanco en HTML, hace referencia a cualquier cadena de texto compuesto por espacios, saltos de línea o tabulaciones. Los espacios en blanco se usan para dar formato al código y que sea fácilmente legible y comprensible.

HTML, ignora los espacios en blanco. Cómo verás a continuación si añadimos espacios blancos mediante la barra espaciadora mientras escribimos en Html, estos no se visualizan en el front.

See the Pen
Untitled
by Gerard (@gcoma)
on CodePen.0

 

Ahora veamos cóm al poner el código Html del espacio, ahora sí, estos nos aparecen

See the Pen
espacios con código html
by Gerard (@gcoma)
on CodePen.0

 

La etiqueta <pre> para espacio en blanco en HTML

La etiqueta html <pre>, o preformateado, nos muestra el texto escrito tal cual, por tanto respeta los espacio blancos que hayamos dejado al escribir, como si fuera un procesador de texto, como Word. Veámoslo a continuación

See the Pen
etiqueta pre
by Gerard (@gcoma)
on CodePen.0

 

Espacios en blanco usando tabulado

Cómo no existe un código para la tecla de tabulado “Tab”, si queremos hacer uso de este estilo, deberemos saber, que generalmente el espacio tabulado, está compuesto por entre 4  5 espacion en blanco. Por tanto, para añadir un tabulado en html, deberemos usar4 espacios en HTML.

See the Pen
Untitled
by Gerard (@gcoma)
on CodePen.0