Agregar espacios entre texto en HTML

Sushant Poudel 19 febrero 2023
  1. Utilice la etiqueta <pre> para insertar espacios en el texto en HTML
  2. Utilice &nbsp; insertar espacios en el texto en HTML
  3. Utilice la propiedad CSS padding para insertar espacios en el texto en HTML
Agregar espacios entre texto en HTML

Este artículo discutirá algunos métodos para insertar espacios y tabulaciones en el texto en HTML. HTML generalmente no permite más de un espacio en blanco a la vez. Estos métodos ayudan a agregar más de un espacio en blanco.

Utilice la etiqueta <pre> para insertar espacios en el texto en HTML

La etiqueta <pre> define un texto preformateado. Presenta el texto exactamente como está escrito en el código HTML. El espacio en blanco dentro de esta etiqueta se muestra como está escrito. Es compatible con casi todos los navegadores web. Podemos usar la etiqueta <pre> para insertar espacios en el texto usando HTML. La etiqueta <pre> admite casi todos los atributos globales del HTML.

Por ejemplo, dentro del cuerpo HTML, abra la etiqueta <pre> al principio. Dentro de esta etiqueta, escriba el texto de su elección. Ahora, por lo general, agregue algunos espacios en blanco aleatorios entre las palabras de su oración en el texto (I'm learning HTML used in the example below). Una vez que haya completado el texto deseado, cierre la etiqueta <pre>. Además, no olvide cerrar todas las etiquetas abiertas anteriormente.

El siguiente ejemplo ilustra un método para agregar espacios bancarios en el texto en HTML. Después de que se abre la etiqueta <pre>, especifica un texto preformateado. El texto I'm learning HTML está escrito dentro de la etiqueta <pre>. Como podemos ver, se utilizan cinco espacios en blanco entre las palabras learning y HTML. La salida también muestra cinco espacios en blanco entre las dos palabras, tal como estaba escrito. Podemos poner tanto espacio como queramos. De esta forma, podemos agregar espacios en blanco en el texto en HTML.

Código de ejemplo:

<pre> I'm learning HTML</pre>

Utilice &nbsp; insertar espacios en el texto en HTML

Podemos utilizar el &nbsp; etiqueta para agregar un espacio en blanco en el texto en un código HTML. La entidad NBSP significa espacio sin ruptura. Un espacio que no se rompe interpreta que es un espacio que no se romperá en una nueva línea. Dos palabras separadas por un espacio que no se separa estarán en la misma línea en lugar de en líneas diferentes. Es ventajoso evitar que los navegadores trunquen espacios en las páginas HTML.

Por ejemplo, dentro del cuerpo HTML, escriba el texto de su elección. En el lugar donde desea agregar el espacio en blanco, escriba &nbsp;. Tienes que escribir el mismo número de &nbsp; como el espacio en blanco que desee. Escribe cinco instancias de &nbsp; y continúe escribiendo el resto del texto. Una vez finalizado, cierre todas las etiquetas abiertas anteriormente.

El siguiente ejemplo ilustra otro método para agregar espacios en blanco en su texto en un código HTML. Después de la palabra learning, la entidad &nbsp; se ordena cinco veces posteriormente. Implica que hay cinco espacios en blanco entre las palabras learning y HTML. Si escribe 5 espacios en su texto en el código, el navegador eliminará cuatro espacios en blanco, pero &nbsp; ayuda a agregar tantos espacios como desee. Entonces, esta es otra forma de agregar espacios en blanco en un código HTML.

Código de ejemplo:

<body>
I'm learning&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML 
</body>

Utilice la propiedad CSS padding para insertar espacios en el texto en HTML

También podemos usar la propiedad CSS padding para agregar espacios en blanco en el texto en HTML. Podemos usar la propiedad padding con la etiqueta <span> para lograr el espacio en blanco. La etiqueta <span> se denomina contenedor en línea ya que no comienza en una nueva línea. Se utiliza para marcar un texto o un documento. No representa nada de forma inherente porque no produce ningún cambio visual por sí solo. Se utiliza con fines de estilo, también es compatible con todos los navegadores web. También es compatible con todos los atributos globales y de eventos en HTML. Podemos usar la propiedad padding-left en un elemento <span> para agregar espacios.

Por ejemplo, dentro del cuerpo HTML, escriba el texto que desee. Donde desee agregar el espacio en blanco, cree un elemento <span> y aplique el estilo en él. Establezca la propiedad padding-left en 30px. Después, cierre la etiqueta <span>. Escriba el texto restante y cierre todas las etiquetas abiertas anteriormente en el código.

Hemos creado un elemento <span> después de la palabra learning en el siguiente ejemplo. Aplicamos el relleno izquierdo de 30px en el elemento. Significa que creamos un espacio de 30px después de la palabra learning, y luego el resto de la palabra continuó. Por lo tanto, agregamos espacios en el texto usando CSS y HTML.

Código de ejemplo:

<body>
I'm learning <span style="padding-left:30px;"></span>HTML
</body>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

Artículo relacionado - HTML Space