Cómo crear espacios en blanco en HTML

Cómo crear espacios en blanco en HTML

Cómo crear espacios en blanco en HTML

VALORACIÓN DEL ARTÍCULO:
5/5


La creación de espacios y la separación física de elementos en HTML puede ser difícil de entender para el diseñador web principiante. Esto se debe a que HTML tiene una propiedad conocida como «colapso de espacio en blanco», ya sea que escriba 1 espacio o 100 en su código HTML, el navegador web automáticamente colapsa esos espacios en un solo espacio. Esto es diferente de un programa como Microsoft Word, que permite a los creadores de documentos añadir múltiples espacios para separar palabras y otros elementos de ese documento. Así no es como funciona el espaciado en el diseño de sitios web.

Entonces, ¿cómo se agregan espacios en blanco en HTML que aparecen en la página web que has construido? Esto examina algunas de las diferentes maneras.

Espacios en HTML con CSS

La forma preferida de añadir espacios en su HTML es con Hojas de Estilo en Cascada (CSS). CSS debe ser usado para añadir cualquier aspecto visual de una página web, y como el espaciado es parte de las características de diseño visual de una página, CSS es donde usted quiere que esto se haga.

En CSS, puede utilizar las propiedades margin o padding para añadir espacio alrededor de los elementos. Además, la propiedad text-indent añade espacio en el anverso del texto, por ejemplo para sangrar párrafos.

He aquí un ejemplo de cómo usar CSS para añadir espacio delante de todos sus párrafos. Añada el siguiente CSS a su hoja de estilo externa o interna:

p {
sangría de texto: 3em;
}

Espacios en HTML: Dentro de su texto

Si sólo desea añadir un espacio adicional o dos a su texto, puede utilizar el espacio no desmarcado. Este carácter actúa como un carácter de espacio estándar, sólo que no colapsa dentro del navegador.

He aquí un ejemplo de cómo añadir cinco espacios dentro de una línea de texto:

Este texto tiene cinco espacios extra dentro de él

Usa el HTML:

También puede utilizar la etiqueta
para añadir saltos de línea adicionales.

Por qué el espaciado en HTML es una mala idea

Mientras que estas dos opciones funcionan - el elemento de espacios no quebradizos añadirá espacio a su texto y los saltos de línea añadirán espacio debajo del párrafo mostrado arriba - esta no es la mejor manera de crear espacio en su página web. Agregar estos elementos a su HTML agrega información visual al código en lugar de separar la estructura de una página (HTML) de los estilos visuales (CSS). Las mejores prácticas dictan que estos deben ser separados por una serie de razones, incluyendo la facilidad de actualización en el futuro y el tamaño general del archivo y el rendimiento de la página.

Si utiliza una hoja de estilo externa para dictar todos sus estilos y espacios, entonces cambiar esos estilos para todo el sitio es fácil de hacer, ya que simplemente tiene que actualizar esa hoja de estilo.

Considere el ejemplo anterior de la oración con cinco etiquetas al final de la misma. Si usted quisiera esa cantidad de espacio en la parte inferior de cada párrafo, necesitaría agregar ese código HTML a cada párrafo en todo su sitio. Eso es una buena cantidad de margen de beneficio extra que hinchará sus páginas. Además, si en el futuro decides que este espaciado es demasiado o demasiado pequeño, y deseas cambiarlo un poco, necesitarás editar cada uno de los párrafos de todo tu sitio web. No, gracias a ti!

En lugar de añadir estos elementos de espaciado a su código, utilice CSS.

p {
fondo acolchado: 20px;
}

Esa línea de CSS añadiría espacio bajo los párrafos de su página. Si usted quería cambiar ese espacio en el futuro, edite esta línea (en lugar del código completo de su sitio) y ¡ya está listo!

Ahora, si necesita agregar un solo espacio en una parte de su sitio web, el uso de una etiqueta
o un solo espacio no rompe no es el fin del mundo, pero hay que tener cuidado. El uso de estas opciones de espaciado HTML en línea puede ser una pendiente resbaladiza. Mientras que uno o dos no pueden dañar su sitio, si usted continúa por ese camino, usted introducirá problemas en sus páginas. Al final, es mejor que recurra a CSS para el espaciado HTML y todas las demás necesidades visuales de la página web

.

TAMBIÉN TE INTERESA

simplr

El consumo de productos de tecnología está cambiando gracias a plataformas como Simplr

Simplr y otras plataformas parecidas están impulsado un cambio de consumo en los productos tecnológicos. La clave de estas webs es que los productos se “alquilan” bajo un pago por uso o suscripción. Mediante esta fórmula, estas compañías aseguran que los usuarios pueden ahorrarse mucho dinero, aunque también hay otras perspectivas destacables. El pago por

redactor de contenido

¿Corre peligro un redactor de contenido con la inteligencia artificial?

Un redactor de contenido es un tipo de profesional que ha existido siempre. Desde la llegada de los medios de comunicación clásicos hasta la consolidación de las plataformas digitales de ocio e información con la llegada de streamers, el puesto también llamado de content editor ha sido relevante se mire por donde se mire. Esa

Amazon Warehouse

¿Buscas oportunidades? Déjate caer por Amazon Warehouse…

Si no conoces Amazon Warehouse es porque nunca has buscado bien en las entrañas de este gigante del comercio electrónico. En este departamento del marketpalce encontraremos chollos, gangas y productos rebajadas al ser reacondicionados o de segunda mano. A lo largo de estas líneas te mostraremos todos los secretos de este rincón de Amazon que

lo-nuevo-de-HP-en-el-CES-2023

Lo más destacado de HP en el CES 2023

Como si fuera una presentación de temporada de una serie de televisión, HP ha aprovechado su momento en el CES 2023, la feria más importante a nivel tecnológico en el mundo, para anunciar todo lo que se viene en este nuevo año para la compañía. Y lo hace poniendo el foco en la vida híbrida