Crea espais i separació física d'elements en HTML amb CSS
La creació d'espais i separació física d'elements en HTML pot ser difícil d'entendre per al dissenyador web inicial. Això és degut a que HTML té una propietat coneguda com "col·lapse d'espais en blanc". ja sigui que escriviu 1 espai o 100 en el vostre codi HTML, el navegador web redueix automàticament aquests espais a només un sol espai. Això és diferent d'un programa com Microsoft Word , que permet als creadors de documents afegir espais múltiples per separar paraules i altres elements d'aquest document.
Això no és el funcionament de l'espai de disseny del lloc web.
Llavors, com s'afegeixen espais en blanc en HTML que apareixen a la pàgina web ? Aquest article examina algunes de les diferents maneres.
Espais en HTML amb CSS
La manera preferida d'afegir espais a l'HTML és amb fulls d'estil en cascada (CSS) . CSS s'ha d'utilitzar per afegir aspectes visuals d'una pàgina web, i atès que l'espaiat és part de les característiques de disseny visual d'una pàgina, CSS és on voleu que es faci.
En CSS, podeu utilitzar les propietats de marge o farcit per afegir espai al voltant dels elements. A més, la propietat de sagnat de text afegeix espai a la part frontal del text, com per a sagnar els paràgrafs.
Aquest és un exemple de com utilitzar CSS per afegir espai al capdavant de tots els paràgrafs. Afegiu el següent CSS al full d'estils extern o intern :
p {
text-guion: 3em;
}
Espais en HTML: dins del vostre text
Si només voleu afegir un espai addicional o dos al vostre text, podeu utilitzar l'espai que no es trenqui.
Aquest caràcter actua com un caràcter d'espai estàndard, només que no s'esfondra dins del navegador.
Aquí teniu un exemple de com afegir cinc espais dins d'una línia de text:
Aquest text té cinc espais extra dins d'ell
Utilitza el codi HTML:
Aquest text té & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cinc espais extra dins d'ell
També podeu utilitzar l'etiqueta de Google per afegir salts de línia addicionals.
Aquesta frase té cinc salts de línia al final d'ella
Per què l'espaiat en HTML és una mala idea
Si bé aquestes opcions funcionen, l'element d'espais que no es trencarà, de fet, afegirà espaiat al vostre text i els salts de línia afegiran un espai per sota del paràgraf que es mostra a dalt: aquesta no és la millor manera de crear espais a la vostra pàgina web. L'addició d'aquests elements a l'HTML afegeix informació visual al codi en lloc de separar l'estructura d'una pàgina (HTML) dels estils visuals (CSS). Les bones pràctiques fan que aquests siguin independents per diversos motius, incloent la facilitat d'actualització en el futur i la mida del fitxer i el rendiment de la pàgina.
Si utilitzeu un full d'estils extern per dictar tots els vostres estils i espais, és fàcil fer canvis en aquests estils per a tot el lloc, ja que només heu d'actualitzar aquest full d'estils.
Tingueu en compte l'exemple anterior de la frase amb cinc etiquetes a l'extrem de la mateixa. Si voleu aquesta quantitat d'espaiat a la part inferior de cada paràgraf, haureu d'afegir el codi HTML a cada paràgraf del vostre lloc sencer. Aquesta és una quantitat justa de marques addicionals que influeixen les vostres pàgines.
A més, si decidiu baixar la carretera perquè aquest espai sigui massa o poc, i voleu canviar-lo una mica, haureu d'editar tots els paràgrafs de tot el lloc web. No gràcies!
En lloc d'afegir aquests elements d'espai al codi, utilitzeu CSS.
p {
farcit inferior: 20 px;
}
Aquesta línia de CSS afegirà espaiat en els paràgrafs de la vostra pàgina. Si voleu canviar aquest espai en el futur, editeu aquesta línia (en comptes del codi de tot el vostre lloc) i sou bé anar!
Ara, si necessiteu afegir un espai únic en una part del vostre lloc web, utilitzar una etiqueta
o un únic espai que no es trenqui no és la fi del món, però cal tenir cura.
L'ús d'aquestes opcions d'espaiat HTML en línia pot ser un pendent relliscós. Tot i que un o dos poden no ferir el vostre lloc, si continueu endavant per aquest camí, introduireu problemes a les vostres pàgines. Al final, és millor tornar a CSS per a l'espaiat HTML i totes les altres necessitats visuals de la pàgina web.