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 es porque HTML tiene una propiedad conocida como "colapso de espacios en blanco". ya sea que escriba 1 espacio o 100 en su código HTML, el navegador web contrae automáticamente esos espacios a un solo espacio. Esto es diferente de un programa como Microsoft Word, que permite a los creadores de documentos agregar varios espacios para separar palabras y otros elementos de ese documento. No es así como funciona el espaciado de diseño de sitios web.
Entonces, ¿cómo se agregan espacios en blanco en HTML que aparecen en el página web que has construido? Este artículo examina algunas de las diferentes formas.
Espacios en HTML con CSS
La forma preferida de agregar espacios en su HTML es con Hojas de estilo en cascada (CSS). CSS debe usarse para agregar cualquier aspecto visual de una página web, y dado que el espaciado es parte de las características de diseño visual de una página, CSS es donde desea que esto se haga.
En CSS, puede usar las propiedades de margen o de relleno para agregar espacio alrededor de los elementos. Además, la propiedad text-indent agrega espacio al principio del texto, como para sangrar párrafos.
Aquí hay un ejemplo de cómo usar CSS para agregar espacio delante de todos sus párrafos. Agregue el siguiente CSS a su externo o interno hoja de estilo:
pag {
sangría de texto: 3em;
}
Espacios en HTML dentro de su texto
Si solo desea agregar un espacio adicional o dos a su texto, puede usar el espacio sin interrupciones. Este carácter actúa como un carácter de espacio estándar, solo que no colapsa dentro del navegador.
A continuación, se muestra un ejemplo de cómo agregar cinco espacios dentro de una línea de texto:
Este texto tiene cinco espacios adicionales en su interior
Utiliza el HTML:
Este texto tiene cinco espacios adicionales en su interior
También puede utilizar el
etiqueta para agregar saltos de línea adicionales.
Esta oración tiene cinco saltos de línea al final.
Por qué el espaciado en HTML es una mala idea
Si bien estas opciones funcionan, el elemento de espacios sin interrupción de hecho agregará espacio a su texto y a la línea los saltos agregarán espacio debajo del párrafo que se muestra arriba; esta no es la mejor manera de crear espacios 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 estar separados por una serie de razones, incluida la facilidad de actualización en el futuro y el tamaño general del archivo y rendimiento de la página.
Si usa 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. Si 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. Esa es una buena cantidad de marcado adicional que inflará sus páginas. Además, si en el futuro decide que este espaciado es demasiado o demasiado pequeño y desea cambiarlo un poco, deberá editar todos los párrafos de su sitio web completo. ¡No gracias!
En lugar de agregar estos elementos de espaciado a su código, use CSS.
pag {
fondo acolchado: 20px;
}
Esa única línea de CSS agregaría espacio debajo de los párrafos de su página. Si desea cambiar ese espacio en el futuro, edite esta línea (en lugar del código de su sitio completo) y ¡listo!
Ahora, si necesita agregar un solo espacio en una parte de su sitio web, utilice un
etiqueta o un solo espacio que no se rompa no es el fin del mundo, pero debes tener cuidado. El uso de estas opciones de espaciado HTML en línea puede ser una pendiente resbaladiza. Si bien uno o dos pueden no dañar su sitio, si continúa por ese camino, 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.