Vegeu com l'espai blanc d'HTML és tractat pels navegadors
Si ets dissenyador web principiant, una de les moltes coses que hauràs d'entendre des del principi és la forma en què els navegadors web manegen l'espai en blanc del codi d'un lloc.
Malauradament, la forma en què els navegadors manejen l'espai en blanc no és molt intuïtiu al principi, especialment si entri a HTML i comparar-lo amb l'espai blanc que es maneja en els programes de processament de textos, amb els que us pot familiaritzar.
En el programari de processament de textos, podeu afegir molts espais o pestanyes al document i aquest espaiat es reflectirà a la visualització del contingut del document. Aquest no és el cas d'HTML ni de pàgines web. Com a tal, saber molt bé l'espai en blanc és, de fet, manejat pels navegadors web.
Espaiat en impressió
En el programari de processament de textos, els tres caràcters d'espai blanc principal són l'espai, la pestanya i el retorn del carro. Cadascun d'aquests actua d'una manera diferent, però en HTML, els navegadors fan que tots siguin bàsicament iguals. Ja sigui que col·loqueu un espai o 100 espais en el marcat HTML, o bé barregeu-ne l'espai amb les pestanyes i els retorns del carro, tots aquests es condensarán a un espai quan la pàgina la renderitzi el navegador. En la terminologia del disseny web, això es coneix com col·lapse d'espai blanc. No podeu utilitzar aquestes tecles d'espaiat típiques per afegir espais en blanc en una pàgina web perquè el navegador col·lapsa diversos espais en només un espai quan es representa en el navegador,
Per què algú fa servir les pestanyes?
Normalment, quan les persones fan servir fitxes en un document de text, les utilitza per motius de disseny o per a que el text es mogui a un determinat lloc o que tingui una certa distància d'un altre element. En el disseny web, no podeu utilitzar els caràcters espacials abans esmentats per aconseguir aquests estils visuals o necessitats de disseny.
En el disseny web, l'ús de caràcters d'espaiat addicional en el codi seria purament per facilitar la lectura d'aquest codi. Els dissenyadors i desenvolupadors web sovint utilitzen les pestanyes per introduir el codi per veure quins elements són fills d'altres elements, però aquests guions no afecten el disseny visual de la pàgina. Per als canvis de disseny visual necessaris, haurà de passar a CSS (fulls d'estil en cascada).
Ús de CSS per crear pestañas HTML i espaiat
Actualment, els llocs web es construeixen amb una separació d'estructura i estil. L'estructura d'una pàgina està controlada per l'HTML mentre l'estil és dictat pel CSS. Això vol dir que per crear espaiat o aconseguir un determinat disseny, heu de tornar a CSS i no tractar de simplement afegir caràcters d'espaiat al codi HTML.
Si esteu intentant utilitzar pestanyes per crear columnes de text, podeu utilitzar elements
Si les dades que esteu establint són dades tabulars, podeu utilitzar taules per alinear-les com vulgueu. Les taules sovint reben un mal rap en el disseny web perquè han estat abusades com a eines de disseny pures durant tants anys, però les taules continuen sent perfectament vàlides si el vostre contingut conté les dades tabulars esmentades.
Marges, farcit i sangria de text
Les formes més habituals per crear espais amb CSS són utilitzant un dels següents estils CSS:
- marge
- farcit
- text-guion
Per exemple, podeu sagnar la primera línia d'un paràgraf com una pestanya amb el següent CSS (tingueu en compte que això suposa que el vostre paràgraf té un atribut de classe de "primer" adjunt).
p.first {
text-indent: 5em;
}
Aquest paràgraf ara tindria sangria sobre 5 caràcters.
També podeu utilitzar les propietats de marge o farcit a CSS per afegir espaiat a la part superior, inferior, esquerra o dreta (o combinacions d'aquests costats) d'un element. En última instància, podeu aconseguir qualsevol tipus d'espaiat necessari si torneu a CSS.
Moure de text més d'un espai sense CSS
Si tot el que voleu és que el vostre text es mogui més d'un espai allunyat de l'element anterior, podeu utilitzar l'espai que no es trenqui.
Per utilitzar l'espai que no es trenca, simplement afegiu & nbsp; tantes vegades com ho necessiteu al vostre marcat HTML.
Per exemple, si voleu moure la vostra paraula cinc espais més, podeu afegir el següent abans de la paraula.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML els respecta i no els col·lapsarà cap a un sol espai. Tanmateix, això es considera una pràctica molt deficient ja que afegeix un marcat HTML addicional a un document només per aconseguir necessitats de disseny. Referint-se a aquesta separació d'estructura i estil, haureu d'evitar afegir espais no trencants simplement per aconseguir un efecte de disseny desitjat i, en el seu lloc, ha d'utilitzar els marges CSS i el farciment.