actualizado: 30/12/2019 por Computer Hope

crear espacio adicional en su HTML en una página web se puede lograr de muchas maneras dependiendo del tipo de espacio que desee crear. Las siguientes secciones contienen muchas de las diferentes formas de crear espacio adicional usando HTML y CSS.,

crear espacios adicionales antes o después del texto

Una de las cosas más confusas para los nuevos usuarios que están creando una 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, utilice el carácter HTML extendido   (espacio sin separación).

por ejemplo, con «extra space» tenemos el siguiente código en nuestro HTML.,

extra    space
Nota

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

Tip

para obtener una lista de caracteres HTML especiales extendidos, consulte: lista completa 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 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 <pre>.

This text has lots of spaces

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

<pre class="tab">This text has lots of spaces</pre>
  • consulte nuestra página de etiquetas HTML <pre> para obtener más información sobre esta etiqueta.
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.,

crear espacio adicional alrededor de un elemento u objeto

cualquier elemento HTML puede tener espacio adicional agregado en la parte superior, derecha, inferior o izquierda. Sin embargo, asegúrese de comprender la diferencia entre margen y relleno antes de decidir el tipo de espacio que desea agregar 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 siguiente ejemplo muestra nuestro párrafo rodeado por un borde, sangrado con un margen y con espaciado a la derecha e inferior.,

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

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

en la primera sección del código, «margin-left: 2.5 em;» agrega 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, «relleno: 0 7em 2em 0;» define el relleno superior, derecho, inferior e izquierdo (en el sentido de las agujas del reloj). Hay relleno superior «0», relleno derecho «7em», relleno inferior » 2em » y relleno izquierdo 0., El resto de este ejemplo está definiendo cómo debe verse el borde.

crear 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 del elemento que contiene el texto. El CSS para crear este margen izquierdo se muestra a continuación.

.tab { margin-left: 2.5em}

después de colocar este código en nuestro archivo CSS, podemos aplicar la clase «tab» a cualquier texto para crear la apariencia de una tabulación. El valor del margen izquierdo se puede aumentar o disminuir dependiendo de 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 ejemplo a continuación.

<p style="margin-left:2.5em">An example of a 5em left margin.</p>

Un ejemplo de un 5em margen izquierdo.

  • ¿Cómo indento o tabulo texto en mi página web o en HTML?

agregar espacio debajo de una línea o párrafo de texto

Si necesita agregar espacio adicional debajo de una línea o párrafo de texto, y solo necesita hacerlo una vez, puede usar la etiqueta <br>. A continuación se muestra un ejemplo de cómo se puede aplicar esta técnica.,

<p>This sentence contains example text.<br><br>As you can see, two breaks add the space above.</p>

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

esta oración contiene texto de ejemplo.como puedes ver, dos saltos añaden el espacio de arriba.

se pueden agregar descansos adicionales si es necesario. Sin embargo, sugerimos usar el método CSS mencionado anteriormente para agregar relleno y espaciado alrededor de su texto si se hace en varios lugares de una página.

información adicional

  • cómo alinear texto en una página web en HTML o CSS.
  • Cómo crear texto HTML sin formato.
  • consulte nuestra definición de espacio en blanco para obtener más información y enlaces relacionados.,
  • Ayuda y soporte de HTML y diseño web.