Cómo crear espacio extra en HTML o en una página web

La creación de espacio adicional en su HTML en una página web puede lograrse de muchas maneras, dependiendo del tipo de espacio que desee crear. Las siguientes secciones contienen muchas de las diferentes formas de crear espacio adicional utilizando HTML y CSS.

Una de las cosas más confusas para los nuevos usuarios que están creando su propia página web es que no pueden presionar la barra espaciadora varias veces para crear espacios adicionales. Para crear espacios adicionales antes, después o entre el texto, use la (espacio no interrumpido) carácter HTML extendido.

Por ejemplo, con "espacio adicional" tenemos el siguiente código en nuestro HTML.

 espacio extra 

Nota: Si está utilizando un editor WYSIWYG para ingresar el código anterior, debe estar en la pestaña HTML o editar el código HTML.

  • Listado completo de caracteres HTML especiales extendidos.

Mantener el espaciado en el texto que se pega en una página

Si está pegando texto con espacios o pestañas adicionales, puede utilizar el código HTML.

 etiqueta para mantener el texto formateado. A continuación se muestra un ejemplo de cómo pegar texto con espacios adicionales usando el 
 etiqueta.

 Este texto tiene muchos espacios. 

El ejemplo anterior se realiza utilizando el siguiente código HTML.

 Este texto tiene muchos espacios. 

Nota: Si está utilizando un editor WYSIWYG para ingresar el código anterior, debe estar en la pestaña HTML o editar el código HTML.

  • Ver nuestro HTML
     Página de etiqueta para más información sobre esta etiqueta.

Creando espacio extra alrededor de un elemento u objeto

Cualquier elemento HTML puede tener espacios adicionales agregados en la parte superior, derecha, inferior o izquierda. Sin embargo, es importante que comprenda la diferencia entre el margen y el relleno antes de decidir qué tipo de espacio desea agregar alrededor del elemento u otro objeto. Como puede ver en la imagen siguiente, el relleno es lo que rodea inmediatamente al elemento, dentro del borde y el margen fuera del borde.

En el siguiente ejemplo, nuestro párrafo está rodeado por un borde, sangrado con un margen y tiene un espacio a la derecha y al final del párrafo.

Un ejemplo de un párrafo con margen y relleno.

El ejemplo anterior fue creado usando el código de abajo.

Ejemplo de un párrafo con margen y relleno.

En la primera sección del código, "margen izquierdo: 2.5em;" agrega un margen izquierdo de 2.5 em, que da la apariencia de texto con sangría. Como se muestra en el ejemplo, este espaciado está fuera del borde. En la siguiente sección, "relleno: 0 7em 2em 0;" está definiendo el relleno superior, derecho, inferior e izquierdo (en el sentido de las agujas del reloj). Hay "0" relleno superior, "7em" relleno derecho, "2em" relleno inferior y 0 relleno izquierdo. El resto de este ejemplo es definir cómo debe verse el borde.

Creando una pestaña usando CSS y HTML

Se puede crear una pestaña en HTML ajustando el margen izquierdo de un elemento. Por ejemplo, este párrafo tiene un margen izquierdo de 2.5 em desde el elemento que contiene el texto. El CSS para crear este margen izquierdo se muestra a continuación.

 .tab {margen izquierdo: 2.5em} 

Después de colocar este código en nuestro archivo CSS, podemos aplicar la clase de "pestaña" a cualquier texto para crear la apariencia de una pestaña. El valor del margen izquierdo se puede aumentar o disminuir según sus necesidades.

Aunque recomendamos el método anterior, el CSS de margen izquierdo también se puede agregar en línea como se muestra en el siguiente ejemplo.

Un ejemplo de un margen izquierdo de 5em.

Un ejemplo de un margen izquierdo de 5em.

  • ¿Cómo puedo sangrar o tabular el texto en mi página web o en HTML?

Si necesita agregar espacio adicional debajo de una línea o párrafo del texto, y solo necesita hacerlo una vez, puede usar el

etiqueta para agregar espacio extra en un documento. A continuación se muestra un ejemplo de cómo se puede aplicar esta técnica.

Esta oración contiene texto de ejemplo.

Como puede ver, se agregaron dos saltos para crear el espacio de arriba.

El código anterior creará el texto que se muestra a continuación.

Esta oración contiene texto de ejemplo.

Como puede ver, se agregaron dos saltos para crear el espacio de arriba.

Se pueden agregar descansos adicionales si es necesario. Sin embargo, le sugerimos que utilice el método CSS mencionado anteriormente para agregar relleno y espacio alrededor de su texto si se realiza en varios lugares de una página.