La forma en que los navegadores manejan los espacios en blanco no es muy intuitiva al principio, especialmente si compara cómo el lenguaje de marcado de hipertexto maneja los espacios en blanco en relación con los programas de procesamiento de texto. En el software de procesamiento de texto, puede agregar muchos espacios o tabulaciones en el documento y ese espacio se reflejará en la visualización del contenido del documento. Este diseño WYSIWYG no es el caso de HTML o de páginas web.
Espaciado en la impresión
En el software de procesamiento de texto, los tres espacios en blanco principales son los espacio, pestaña, y retorno de carro. Cada uno de estos caracteres actúa de una manera distinta, pero en HTML, los navegadores los representan a todos esencialmente de la misma manera. Ya sea que coloque un espacio o 100 espacios en su Marcado HTML o mezclar su espaciado con pestañas y retornos de carro, todos estos se condensarán en un espacio cuando la página sea renderizada por el navegador
. En terminología de diseño web, esto se conoce como colapso del espacio en blanco. No puede usar estas teclas de espaciado típicas para agregar espacios en blanco en una página web porque el navegador colapsa los espacios repetidos en un solo espacio cuando se procesan en el navegador,Uso de CSS para crear pestañas HTML y espaciado
Los sitios web de hoy se construyen con una separación de estructura y estilo. La estructura de una página es manejada por HTML, mientras que el estilo es dictado por Cascading Style Sheets. Para crear espacios o lograr un diseño determinado, utilice CSS en lugar de agregar caracteres de espaciado al código HTML.
Si está intentando utilizar pestañas para crear columnas de texto, en su lugar use
Si los datos que está presentando son datos tabulares, use tablas para alinear esos datos 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 puras durante tantos años, pero las tablas siguen siendo perfectamente válidas si su contenido contiene datos realmente tabulares.
Márgenes, relleno y sangría de texto
La forma más común de crear espacios con CSS es mediante el uso de uno de los siguientes estilos CSS:
- margen
- relleno
- guion de texto
Por ejemplo, sangra la primera línea de un párrafo como una pestaña con el siguiente CSS (ten en cuenta que esto supone que tu párrafo tiene un atributo de clase de "primero" adjunto):
p.first {
sangría de texto: 5em;
}
Este párrafo sangra alrededor de cinco caracteres.
Utilice las propiedades de margen o relleno en CSS para agregar espacio en la parte superior, inferior, izquierda o derecha (o combinaciones de esos lados) de un elemento. Consiga cualquier tipo de espaciado necesario recurriendo a CSS.
Mover texto en más de un espacio sin CSS
Si todo lo que desea es que su texto se mueva a más de un espacio del elemento anterior, use el espacio que no se separa.
Para utilizar el espacio que no se rompe, agrega tantas veces como lo necesite en su marcado HTML.
HTML respeta estos espacios que no se rompen y no los colapsará en un solo espacio. Sin embargo, este enfoque se considera una práctica deficiente, ya que agrega marcado HTML adicional a un documento solo para satisfacer las necesidades de diseño. Cuando sea posible, evite agregar espacios que no se rompan simplemente para lograr el efecto de diseño deseado y usar Márgenes y relleno CSS en lugar de.