Si usted es un diseñador web principiante, una de las muchas cosas que tendrá que entender desde el principio es la forma en que el espacio en blanco en el código de un sitio es manejado por los navegadores web.
Desafortunadamente, la forma en que los navegadores manejan el espacio en blanco no es muy intuitiva al principio, especialmente si se entra en HTML y se compara con la forma en que se maneja el espacio en blanco en los programas de procesamiento de texto, con los que usted puede estar más familiarizado. En el software de procesamiento de texto, puede añadir muchos espacios o tabulaciones en el documento y ese espacio se reflejará en la visualización del contenido del documento. Este no es el caso de HTML o de las páginas web. Como tal, es muy importante aprender cómo el espacio en blanco es manejado por los navegadores web.
Índice de contenidos
Espacio en blanco en la impresión
En el software de procesamiento de texto, los tres caracteres de espacio en blanco principales son el espacio, la ficha y el retorno de carro. Cada uno de estos actos de una manera distinta, pero en HTML, los navegadores los hacen todos esencialmente iguales. Ya sea que coloque un espacio o 100 espacios en su marcado HTML o que mezcle su espaciado con tabulaciones y retornos de carro, todo esto se condensará en un espacio cuando el navegador muestre la página. En la terminología de diseño web, esto se conoce como colapso del espacio en blanco. No puede utilizar estas típicas teclas de espaciado para añadir espacios en blanco en una página web porque el navegador colapsa múltiples espacios en un solo espacio cuando se renderizan en el navegador,
¿Por qué se utilizan las pestañas?
Típicamente, cuando la gente usa pestañas en un documento de texto, las usa por razones de diseño o para hacer que el texto se mueva a un lugar determinado o para estar a una cierta distancia de otro elemento. En el diseño web, no se pueden utilizar los caracteres de espacio mencionados anteriormente para lograr esos estilos visuales o necesidades de diseño. En el diseño web, el uso de caracteres de espaciado extra en el código sería puramente para facilitar la lectura de ese código. Los diseñadores y desarrolladores web suelen utilizar pestañas para sangrar el código de modo que puedan ver qué elementos son hijos de otros elementos, pero esos sangrados no afectan al diseño visual de la página en sí. Para aquellos cambios necesarios en el diseño visual, tendrá que recurrir a CSS (hojas de estilo en cascada).
Uso de CSS para crear tabulaciones y espacios HTML
Los sitios web hoy en día se construyen con una separación de estructura y estilo. La estructura de una página es manejada por el HTML mientras que el estilo es dictado por el CSS. Esto significa que para crear espacios o lograr un diseño determinado, debe recurrir a CSS y no intentar simplemente añadir caracteres de espaciado al código HTML.
Si está intentando usar tabuladores para crear columnas de texto, puede utilizar en su lugar elementos que estén posicionados con CSS para obtener esa distribución de columnas. Este posicionamiento se puede realizar mediante flotadores CSS, posicionamiento absoluto y relativo, o mediante nuevas técnicas de diseño CSS como Flexbox o CSS Grid.
Si los datos que presenta son datos tabulares, puede utilizar tablas para alinearlos como desee. Las tablas a menudo tienen una mala reputación en el diseño web porque se abusó de ellas como herramientas de diseño puro durante muchos años, pero las tablas siguen siendo perfectamente válidas si su contenido contiene los datos tabulares antes mencionados.
Márgenes, relleno y Text-Indent
La forma más común de crear espacios con CSS es utilizando uno de los siguientes estilos de CSS:
- margen
- acolchado
- sangría de texto
Por ejemplo, puede sangrar la primera línea de un párrafo como una pestaña con el siguiente CSS (tenga en cuenta que esto asume que su párrafo tiene un atributo de clase «first» adjunto):
p.first {
sangría de texto: 5em;
}
Este párrafo tendría ahora unos cinco caracteres sangrados.
También puede utilizar las propiedades de margen o relleno en CSS para añadir espacio en la parte superior, inferior, izquierda o derecha (o combinaciones de esos lados) de un elemento. En última instancia, se puede lograr cualquier tipo de espaciado que se necesite recurriendo a CSS.
Mover texto más de un espacio sin CSS
Si lo único que desea es que su texto se aleje más de un espacio del elemento anterior, puede utilizar el espacio no divisible.
Para usar el espacio no rompible, simplemente añada
tantas veces como lo necesite en su maquetación HTML.
Por ejemplo, si desea mover su palabra cinco espacios por encima, puede añadir lo siguiente antes de la palabra.
.
HTML las respeta y no las comprime en un solo espacio. Sin embargo, esto se considera una práctica muy pobre ya que está añadiendo marcas HTML adicionales a un documento sólo para satisfacer las necesidades de diseño. Refiriéndose de nuevo a esa separación de estructura y estilo, debería evitar añadir espacios no quebradizos simplemente para lograr el efecto de diseño deseado y debería utilizar en su lugar márgenes y relleno de CSS.
