Crear 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 espacios en blanco". Si escribe 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 agregar múltiples espacios para separar palabras y otros elementos de ese documento. Esto no es cómo funciona el espacio de diseño de sitios web.
Entonces, ¿cómo agregar espacios en blanco en HTML que aparecen en la página web? 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 las hojas de estilo en cascada (CSS). CSS debe usarse para agregar 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 desea que se haga esto.
En CSS, puede usar el margen o las propiedades de relleno para agregar espacio alrededor de los elementos. Además, la propiedad de sangría de texto agrega espacio al frente del texto, como para sangrar párrafos.
Este es un ejemplo de cómo usar CSS para agregar espacio delante de todos sus párrafos. Agregue el siguiente CSS a su hoja de estilo externa o interna:
pag {texto-sangría: 3em;} Si solo desea agregar un espacio adicional o dos a su texto, puede usar el espacio de no separación. Este personaje actúa como un carácter de espacio estándar, solo que no se colapsa dentro del navegador. Este es 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 puedes usar el Esta frase tiene cinco saltos de línea al final. Si bien estas dos opciones funcionan, el elemento de espacios sin interrupción agregará espacio al texto y los saltos de línea agregarán espacio debajo del párrafo que se muestra 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 varias razones, incluida la facilidad de actualización en el futuro y el tamaño general del archivo y el rendimiento de la página. Si usa una hoja de estilo externa para dictar todos sus estilos y espacios, entonces es fácil cambiar esos estilos para todo el sitio, ya que simplemente tiene que actualizar esa hoja de estilo. Considere el ejemplo anterior de la oración con cinco En lugar de agregar estos elementos de espaciado a su código, use CSS. pag {parte inferior de relleno: 20px;} Esa única línea de CSS agregaría espacio entre los párrafos de tu página. ¡Si quería cambiar ese espacio en el futuro, edite esta línea (en lugar del código completo de su sitio) y listo! Ahora, si necesita agregar un solo espacio en una parte de su sitio web, use un Espacios en HTML: Dentro de tu texto
etiqueta para agregar saltos de línea adicionales.
Por qué el espaciado en HTML es una mala idea
Etiquetas al final de la misma. Si desea esa cantidad de espacio en la parte inferior de cada párrafo, deberá agregar ese código HTML a cada párrafo de todo el sitio. Esa es una buena cantidad de margen de beneficio adicional que inflará sus páginas. Además, si decide a lo largo del camino que este espacio es demasiado o muy poco, y desea cambiarlo un poco, deberá editar cada párrafo en su sitio web completo. ¡No gracias!
La etiqueta o un solo espacio que no se rompa 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. Si bien uno o dos no pueden dañar su sitio, si continúa por ese camino, introducirá problemas en sus páginas. Al final, es mejor que cambie a CSS para el espaciado de HTML y todas las demás necesidades visuales de la página web.
