Vexa como o espazo branco en HTML é tratado polos navegadores
Se vostede é un deseñador web de inicio, unha das moitas cousas que terá que entender desde o principio é a forma na que o espazo branco no código dun sitio é xestionado polos navegadores web.
Desafortunadamente, o xeito no que os navegadores manexaron o espazo en branco non é moi intuitivo ao principio, especialmente se entra en HTML e compárao co espazo branco que se manexa nos programas de procesamento de textos, co que pode estar máis familiarizado.
No software de procesamento de texto, pode engadir moitos espazos ou pestañas no documento e ese espazo será reflectido na visualización do contido do documento. Este non é o caso de HTML ou con páxinas web. Como tal, saber como o espazo branco é, de feito, manexado polos navegadores web é moi importante.
Espazamento en impresión
No software de procesamento de texto, os tres espazos de espazo branco primario son o espazo, a lapela e o retorno de carro. Cada un deles actúa dun xeito distinto, pero en HTML, os navegadores fan que todos sexan esencialmente iguais. Se coloca un espazo ou 100 espazos no seu marcador HTML, ou mestura a súa separación coas pestañas e as voltas de transporte, todas estas serán condensadas ata un espazo cando a páxina o renderice a páxina. Na terminoloxía do deseño web, isto é coñecido como colapso do espazo branco. Non podes usar estas teclas de espazo típicas para engadir espazos en branco nunha páxina web porque o navegador colapsa varios espazos en só un espazo cando se renderiza no navegador,
Por que alguén usa pestañas?
Normalmente, cando as persoas usan pestañas nun documento de texto, as utilizan por razóns de deseño ou para que o texto se mova a un lugar determinado ou que teña certa distancia doutro elemento. No deseño web, non podes usar eses caracteres espaciais anteriormente mencionados para lograr eses estilos visuais ou necesidades de deseño.
No deseño web, o uso de caracteres de espazamento adicional no código sería puramente máis fácil de ler ese código. Os deseñadores e desenvolvedores web adoitan empregar pestanas para introducir o código para que poidan ver que elementos son fillos doutros elementos, pero estes guións non afectan o deseño visual da propia páxina. Para os cambios necesarios para o deseño visual, necesitará recorrer a CSS (follas de estilo en cascada).
Usando CSS para crear pestañas e espazos en HTML
Os sitios web hoxe en día están construídos cunha separación de estrutura e estilo. A estrutura dunha páxina é tratada polo HTML mentres o estilo é ditado polo CSS. Isto significa que para crear espazos ou acadar un determinado deseño, debes ir a CSS e non tentar simplemente engadir caracteres de espazamento ao código HTML.
Se estás tentando usar pestanas para crear columnas de texto, pode empregar elementos
Se os datos que estás a configurar son datos tabulares, podes usar táboas para aliñar eses datos como queiras. As táboas adoitan ter un mal rap no deseño web porque foron abusadas como ferramentas de deseño puro por tantos anos, pero as táboas aínda son perfectamente válidas se o seu contido contén os datos tabulares mencionados.
Marxes, recheo e sangría de texto
As formas máis comúns de crear espaciamento con CSS son os seguintes estilos CSS:
- marxe
- padding
- guión de texto
Por exemplo, pode sangrar a primeira liña dun parágrafo como unha pestana co seguinte CSS (ten en conta que isto supón que o seu parágrafo ten un atributo de clase de "primeiro" unido a el):
p.first {
guión de texto: 5em;
}
Este parágrafo agora sería sangrado preto de 5 caracteres.
Tamén pode usar a marxe ou as propiedades de recheo en CSS para engadir espazos cara arriba, abaixo, esquerda ou dereita (ou combinacións desas partes) dun elemento. En última análise, pode acadar calquera tipo de espazo necesario volvendo a CSS.
Mover texto máis dun espazo sen CSS
Se todo o que desexa é que se move o seu texto a máis dun espazo lonxe do elemento anterior, pode usar o espazo sen interrupción.
Para usar o espazo sen interrupción, simplemente engade & nbsp; cantas veces o necesites no teu marcador HTML.
Por exemplo, se quería mover a súa palabra a cinco espazos, pode engadir o seguinte antes da palabra.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;O HTML respecta estes e non os colapsará ata un só espazo. Non obstante, considérase unha práctica moi deficiente xa que está engadindo marcación HTML extra a un documento só para acadar as necesidades de deseño. Ao remitir esa separación de estrutura e estilo, debes evitar engadir espazos non ruptura simplemente para lograr un efecto de deseño desexado e usar marxes CSS e recheo.