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
.
