Cómo crear un espacio extra en HTML

Crear un espacio extra en el HTML de una página web puede hacerse de muchas maneras, dependiendo del tipo de espacio que se quiera crear. En las siguientes secciones encontrarás muchas de las diferentes formas de crear espacio extra utilizando tanto HTML como CSS.

Crear espacios extra antes o después del texto –  

extra    espacio

Conservar el espaciado existente en el texto pegado desde otra página/documento

Si estás pegando un texto con espacios extra o tabulaciones, puedes usar la etiqueta HTML <pre> para mantener el texto formateado.

A continuación se muestra un ejemplo de cómo pegar texto con espacios adicionales utilizando la etiqueta HTML <pre>.

Este    texto      tiene    muchos        espacios

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

<pre>Este   texto    tiene   muchos     espacios</pre>

Cómo crear un espacio extra alrededor de un elemento u objeto

A cualquier elemento HTML se le puede añadir un espacio adicional en la parte superior, derecha, inferior o izquierda. Sin embargo, asegúrate de entender la diferencia entre margen (margin) y relleno (padding) antes de decidir el tipo de espacio que quieres añadir alrededor del elemento u objeto. Como se ve en la imagen de abajo, el relleno rodea el elemento, dentro del borde, y el margen fuera del borde.

El ejemplo siguiente muestra nuestro párrafo rodeado por un borde, con sangría y un margen, y con espaciado a la derecha y abajo.

Ejemplo de un párrafo con margen y relleno.

Código utilizado:

<p style="margin-left: 2.5em;padding: 0 7em 2em 0;border-width: 2px; border-color: black; border-style:solid;">Ejemplo de un párrafo con margen y relleno.</p>

En la primera sección del código, “margin-left: 2.5em;” añade un margen izquierdo de 2.5 em, lo 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, “padding: 0 7em 2em 0;” está definiendo el relleno superior, derecho, inferior e izquierdo (en el sentido de las agujas del reloj). Hay “0” padding superior, “7em” padding derecho, “2em” padding inferior, y 0 padding izquierdo. El resto de este ejemplo define el aspecto del borde.

Crear un tabulado usando CSS y HTML

Se puede crear un tabulador 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.

.tabulado {
 margin-left: 2.5em
}

Después de colocar este código en nuestro archivo CSS, podemos aplicar la clase “tabulado” a cualquier texto para crear la apariencia de una tabulación.

El valor del margen izquierdo puede ser aumentado o disminuido dependiendo de tus necesidades.

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

<p style="margin-left:2.5em">Ejemplo con 2.5em de margen izquierdo.</p>

Ejemplo con 7em de margen izquierdo.

Añadir un salto de línea o de un párrafo

Si necesita añadir espacio extra debajo de una línea o de un párrafo, y sólo tiene que hacerlo una vez, puede utilizar la etiqueta HTML <br>. A continuación presentamos un ejemplo de cómo se puede aplicar esta técnica.

Esta linea salta dos veces a partir de aquí:

Como puedes visualizar, ha habido dos saltos de linea.

Se pueden añadir saltos adicionales si es necesario. Sin embargo, sugerimos utilizar el método CSS mencionado anteriormente para añadir relleno y espaciado alrededor de su texto si se hace en múltiples lugares de una página.