El model de caixa

This translation is in progress.

Tot el que hi ha en CSS té una casella al voltant, i entendre aquestes caselles és clau per poder crear dissenys amb CSS, o alinear els elements amb altres elements. En aquesta lliçó, analitzarem adequadament el model de caixa CSS per tal de poder dur a terme tasques de disseny més complexes, comprendrem el seu funcionament i coneixerem la terminologia relacionada.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i una idea de com funciona el CSS (mira Primers passos amb CSS).
Objectiu: Obtenir més informació sobre el model de caixa CSS, què compon el model de caixa i com canviar al model alternatiu.

Caixes en bloc i en línia

En CSS, generalment, tenim dos tipus de caixes: caixes en bloc i caixes en línia. Aquestes característiques fan referència a com es comporta la caixa en termes de flux de pàgina i en relació amb altres caixes de la pàgina:

Si es defineix una caixa com un bloc, es comportarà de les maneres següents:

  • La caixa s’estendrà en la direcció de la línia per omplir l’espai disponible al seu contenidor. En la majoria dels casos, això significa que la caixa s’ampliarà com el seu contenidor, omplint el 100% de l’espai disponible.
  • La caixa es desglossarà en una nova línia.
  • Es respecten les propietats damplada (width) i d'alçada (height).
  • L'espai de farciment, el marge i la vora faran que els altres elements es mantinguin allunyats de la caixa.

A menys que decidim canviar el tipus de visualització a en línia, els elements com els encapçalaments (per exemple, <h1>) i <p> utilitzen block com a tipus de visualització per defecte.

Si una caixa té un tipus de visualització exterior inline, llavors:

  • La caixa no es desglossarà en una nova línia.
  • Les propietats width i height no s'aplicaran.
  • S’aplicarà l'àrea de farciment, el marge i les vores, però no farà que altres caselles en línia s’allunyin de la caixa.

L’element <a>, usat per a enllaços <span>, <em> i <strong> és un exemple d’elements que es mostraran en línia per defecte.

El tipus de caixa aplicada a un element està definit pels valors de propietat display com block i inline i es relaciona amb el valor outer de display.

A part: Tipus de visualització interior i exterior

En aquest moment, és millor que també expliquem els tipus de visualització inner i outer Com s'ha esmentat anteriorment, les caixes CSS tenen un tipus de visualització outer, que detalla si la caixa està en bloc o en línia.

No obstant això, les caixes també tenen un tipus de visualització interna, que determina com es disposen els elements dins d'aquesta caixa. De manera predeterminada, els elements dins d’una caixa estan disposats en un flux normal, cosa que significa que es comporten igual que qualsevol altre elements en bloc i elements en línia (com s’explica més amunt).

Tanmateix, podem canviar el tipus de visualització interior mitjançant valors de display com flex. Si establim display: flex; en un element, el tipus de visualització exterior és block, però el tipus de visualització interior es canvia per flex. Els fills directes d’aquesta caixa es convertiran en articles flexibles i es repartiran d’acord amb les regles que s’especifiquen a les especificacions de Flexbox, que veurem més endavant.

Nota: Per obtenir més informació sobre els valors de la visualització i sobre com funcionen les caixes en bloc i en línia, consulta la guia MDN per a Disposició en bloc i en línia.

Quan avancis a l'article Disposició en CSS, trobaràs flex i diversos valors interiors que pots donar a les teves caixes, per exemple, grid.

Tanmateix, el disseny i el format en línia és la forma predeterminada de com es comporten les coses de la web. Com hem dit anteriorment, a vegades coneix com el flux normal, ja que sense cap altra instrucció, les nostres caixes es classifiquen com a caixes en bloc o en línia.

Exemples de diferents tipus de visualització

Avancem i fem una ullada a alguns exemples. A continuació, es mostren tres elements HTML diferents, tots ells amb un tipus block de visualització exterior. El primer és un paràgraf amb una vora afegida amb CSS. El navegador es converteix en una caixa en bloc, de manera que el paràgraf comença en una nova línia i s'expandeix fins a l'amplada disponible.

El segon és una llista que es mostra mitjançant display: flex. Això estableix un esquema de flexió per als elements dins del contenidor, però, la llista en si mateixa és una caixa en bloc i, com el paràgraf, s’expandeix fins a l’amplada del contenidor i es desglossa en una línia nova.

A sota, tenim un paràgraf a nivell de bloc, dins del qual hi ha dos elements <span>. Aquests elements normalment estarien inline, però, un dels elements té una classe en bloc, i l'hem configurat amb display: block.

 

Podem veure com es comporten els elements inline en l'exemple següent. Els elements <span> del primer paràgraf estan en línia per defecte i no fan que les línies es desglossin.

També tenim un element <ul> que es pot configurar amb display: inline-flex, que crea una caixa en línia al voltant d'alguns elements flex.

Finalment, tenim dos paràgrafs configurats amb display: inline. El contenidor de flexió en línia i els paràgrafs es combinen en una sola línia en lloc de dividir-se en noves línies com ho farien si es mostraven com a elements a nivell de bloc.

A l'exemple, pots canviar de display: inline a display: block o de display: inline-flex a display: flex per alternar entre aquests modes de visualització.

 

En articles posteriors trobaràs coses com ara el disseny flexible; de moment has de recordar que canviar el valor de la propietat display pot canviar si el tipus de visualització exterior d’una caixa és en bloc o en línia, cosa que canvia la manera com es mostra al costat d’altres elements en la disposició. 

A la resta de la lliçó, ens centrarem en el tipus de visualització exterior.

Què és el model de caixa CSS?

El model complet de caixa CSS s'aplica a les caixes en bloc, les caixes en línia només utilitzen una mica del comportament definit al model de caixa. El model defineix com funcionen conjuntament les diferents parts d’una caixa (el marge, la vora, l'àrea de farciment i el contingut) per crear una caixa que es pugui visualitzar a la pàgina. Per afegir una mica de complexitat addicional, hi ha un model de caixa estàndard i un model de caixa alternatiu.

Parts d'una caixa

Per crear una caixa en bloc amb CSS tenim:

  • El contingut de la caixa: L'àrea on es mostra el contingut, que es pot dimensionar amb propietats com width i height.
  • L'àrea de farciment de la caixa: L'àrea de farciment s’ubica al voltant del contingut com a espai blanc; la seva mida es pot controlar mitjançant padding i propietats relacionades.
  • La vora de la caixa: La vora envolta el contingut i qualsevol àrea de farciment. La seva mida i el seu disseny es poden controlar mitjançant border i propietats relacionades.
  • El marge de la caixa: El marge és la capa més externa, embolica el contingut, l'àrea de farciment i el límit com a espai en blanc entre la caixa i altres elements. La seva mida es pot controlar mitjançant margin i propietats relacionades.

El diagrama següent mostra aquestes capes:

Diagrama del model de caixa

El model de caixa CSS estàndard

Al model de caixa estàndard, si es dóna a la caixa els atributs width i height, es defineix l'amplada i l'alçada de contingut de la caixa. A continuació, s'afegeix qualsevol àrea de farciment i vora a l'amplada i l'altura per aconseguir que la caixa s'adapti a la mida total. Això es mostra a la imatge de sota.

Si suposem que la caixa té el CSS següent definint width, height, margin, border i padding:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

L’espai ocupat per la nostra caixa amb el model de caixa estàndard serà de 410 px (350 + 25 + 25 + 5 + 5) i l’alçada de 210 px (150 + 25 + 25 + 5 + 5), ja que l'àrea de farciment i la vora s'afegeixen a l'amplada utilitzada per a la caixa de contingut.

Exemple de la mida de la caixa quan s’utilitza el model de caixa estàndard.

Nota: El marge no es compta sobre la mida real de la caixa: òbviament afecta l’espai total que ocuparà la caixa a la pàgina, però només l’espai fora de la caixa. L’àrea de la caixa s’atura a la vora: no s’estén fins al marge.

El model de caixa CSS alternatiu

Podries pensar que és bastant inconvenient haver de sumar la vora i l'àrea de farciment per obtenir la mida real de la caixa, i tens raó! Per aquesta raó, el CSS va introduir un model de caixa alternatiu poc després de crear el model de caixa estàndard. Amb aquest model, qualsevol amplada és l'amplada de la caixa visible de la pàgina, per tant l'amplada de l'àrea de contingut és que l'amplada menys l'amplada per a l'àrea de farciment i la vora. El mateix CSS que hem fet servir a l'exemple anterior donaria el resultat següent (amplada = 350 px, alçada = 150 px).

Exemple de la mida de la caixa quan s’utilitza el model de caixa alternatiu.

Per defecte, els navegadors utilitzen el model de caixa estàndard. Si vols activar el model alternatiu per a un element, fes-ho mitjançant la configuració de box-sizing: border-box. En fer-ho, li dius al navegador que prengui la vora de la caixa com a zona definida per qualsevol mida que hagis definit.

.box { 
  box-sizing: border-box; 
} 

Si vols que tots els teus elements utilitzin el model de caixa alternativa, elecció habitual entre els desenvolupadors, configura la propietat box-sizing a l’element <html> i, a continuació, configura tots els altres elements per heretar aquest valor, tal com es veu a l'exemple següent. Si vols entendre el pensament que hi ha al darrere, consulta l'article Trucs sobre la mida de la caixa en CSS.

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

Nota: Una dada curiosa és que Internet Explorer solia treballar per defecte amb el model de caixa alternativa i no tenia cap mecanisme disponible per canviar-ho.

Jugar amb els models de caixes

A l’exemple següent, pots veure dues caixes. Ambdues tenen una classe .box, que els proporciona els mateixos width, height, margin, border i padding. L’única diferència és que la segona caixa s’ha configurat per utilitzar el model de caixa alternatiu.

Pots canviar la mida de la segona caixa (afegint CSS a la classe .alternate) per fer-la coincidir amb l'alçada i l'amplada de la primera caixa?

 

Nota: Pots trobar la solució a aquesta tasca aquí.

Utilitza el navegador DevTools per veure el model de caixa

Les eines per a desenvolupadors de navegadors poden facilitar la comprensió del model de caixa. Si inspecciones un element al DevTools del Firefox, pots veure la mida de l’element més el seu marge, un àrea de farciment i una vora. Inspeccionar un element d'aquesta manera és una bona manera de saber si la caixa és realment de la mida que creus.

Inspecció del model de caixa d’un element mitjançant Firefox DevTools

Marges, àrees de farciment i vores

Ja has vist les propietats margin, padding i border a l'exemple anterior. Les propietats que s’utilitzen en aquest exemple són les dreceres i ens permeten establir els quatre costats de la caixa alhora. Aquestes propietats abreviades també tenen propietats equivalents sense abreviar, que permeten controlar els diferents costats de la caixa individualment.

Explorem aquestes propietats amb més detall.

Marges

El marge és un espai invisible que hi ha al voltant de la caixa. Empeny altres elements lluny de la caixa. Els marges poden tenir valors positius o negatius. Si estableixes un marge negatiu a un costat de la caixa, es podría sobreposar a altres coses de la pàgina. Tant si utilitzes el model de caixa estàndard com l'alternatiu, el marge s’afegeix sempre després de calcular la mida de la caixa visible.

Podem controlar tots els marges d’un element alhora alhora mitjançant la propietat margin o bé per cada costat de forma individual mitjançant les propietats equivalents:

A l’exemple següent, intenta canviar els valors del marge per veure com s’envolta la caixa a causa de la creació o eliminació de l’espai (si és un marge negatiu) entre aquest element i l’element que conté.

 

Col·lapse del marge

Un punt clau per entendre els marges és el concepte de col·lapse del marge. Si tens dos elements els marges dels quals es toquen, aquests marges es combinaran per convertir-se en un sol marge, que és la mida del marge individual més gran.

A l’exemple següent, tenim dos paràgrafs. El paràgraf superior té un margin-bottom de 50 píxels. El segon paràgraf té un margin-top de 30 píxels. Els marges han col·lapsat de manera que el marge real entre les caixes és de 50 píxels i no el total dels dos marges.

Pots provar-ho establint margin-top del segon paràgraf a 0. El marge visible entre els dos paràgrafs no canviarà: conserva els 50 píxels establerts al bottom-margin del primer paràgraf.

 

Hi ha diverses normes que dicten quan els marges es col·lapsen i quan no. Per a més informació, mira la pàgina detallada sobre el col·lapse del marge. El més important a recordar de moment és que el col·lapse de marge és una cosa que succeeix. Si crees espai amb marges i no obtens l’espai que esperes, probablement això és el que està passant.

Vores

La vora es dibuixa entre el marge i l'àrea de farciment d'una caixa. Si utilitzas el model de caixa estàndard, la mida de la vora s’afegeix awidth i height de la caixa. Si utilitzes el model de caixa alternatiu, la mida de la vora fa que la caixa de contingut sigui més petita ja que ocupa una mica de width i height disponibles.

Exiteix un gran nombre de propietats per dissenyar les vores: hi ha quatre vores i cada vora té un estil, amplada i color que potser voldríem manipular.

Pots definir l'amplada, l'estil o el color de les quatre vores alhora mitjançant la propietat border.

Per establir les propietats de cada costat de forma individual, pots utilitzar:

Per establir l'ample, l”estil, o el color de tots els costats, utilitza les formules següents:

Per definir l'amplada, l'estil o el color d'un sol costat, pots utilitzar una de les propietats següents:

A l'exemple següent hem utilitzat diverses propietats abreviades i sense avrebiar per crear vores. Juga amb les diferents propietats per comprovar que entens el seu funcionament. Les pàgines de MDN de les propietats de vora proporcionen informació sobre els diferents estils de vora que pots triar.

 

Àrea de farciment

L'àrea de farciment està situada entre la vora i l’àrea de contingut. A diferència dels marges, no pots tenir quantitats negatives d'àrea de farciment, de manera que el valor ha de ser 0 o un valor positiu. Qualsevol antecedent aplicat al vostre element es mostrarà darrere de l'àrea de farciment i, normalment, s'utilitza per allunyar el contingut de la vora.

Podem controlar l'àrea de farciment a cada costat d’un element de manera individual mitjançant la propietat padding o bé per cada costat individualment mitjançant les propietats equivalents:

Si canvies els valors de l'àrea de farciment a la classe .box de l'exemple següent, pots veure que això canvia on comença el text en relació amb la caixa.

També pots canviar el farciment a la classe .container, que obrirà un espai entre el contenidor i la caixa. L'àrea de farciment es pot canviar en qualsevol element i farà espai entre la vora i el que hi hagi dins de l'element.

 

El model de caixa i les caixes en línia

Totes les opcions anteriors només s'apliquen a les caixes en bloc. Algunes de les propietats poden aplicar-se també a les caixes en línia, com ara els creats per un element <span>.

A l'exemple següent, tenim un <span> dins d'un paràgraf i li hem aplicat width, height, margin, border i padding Pots veure que l’amplada i l’altura s’ignoren. Es respecta el marge, l'àrea de farciment i la vora, però no canvien la relació d'altres continguts amb la nostra caixa en línia i, per tant, l'àrea de farciment i la vora se solapen amb altres paraules del paràgraf.

 

Fer servir display: inline-block

Hi ha un valor especial display, que proporciona un punt intermedi entre inline i block. Això és útil per a situacions en què no vols que un article es trenqui sobre una nova línia, però vols que respecti width i height i evitar que es superposin.

Un element display: inline-block fa un subconjunt de les coses en bloc que ja coneixem:

  • Es respecten les propietats width i height.
  • padding, margin i border faran que s’eliminin altres elements de la caixa.

Tanmateix, no es desglossa en una línia nova i només es farà més gran que el seu contingut si afegeixes explícitament propietats width and height.

En l'exemple següent, hem afegit display: inline-block al nostre element <span>. Prova de canviar això per display: block o elimina la línia per veure la diferència en els models de visualització.

 

Això pot ser útil si vols donar a un enllaç una àrea més gran afegint padding. <a> és un element en línia com <span>; pots utilitzar display: inline-block per permetre que es pugui configurar l'àrea de farciment, de manera que un usuari faci clic a l'enllaç.

Això ho veus bastant freqüentment a les barres de navegació. La navegació següent es mostra en una fila mitjançant flexbox i hem afegit àrea de farciment a l'element <a>, ja que volem canviar el color de fons (background-color) quan <a> està resaltat. L'àrea de farciment sembla que sobreposa la vora a l’element <ul>. Això es deu al fet que <a> és un element en línia.

Afegeix display: inline-block a la regla amb el selector .links-list a i veuràs com soluciona aquest problema fent que els altres elements respectin l'àrea de farciment.

 

Resum

Això és el que has d’entendre sobre el model de caixa. Potser voldràs tornar a aquesta lliçó en el futur si et trobes confós sobre la mida de les caixes.

A la lliçó següent, analitzarem com es poden fer servir fons i vores per fer que les teves caixes siguin més interessants.

En aquest mòdul

  1. La cascada i l'herència
  2. Selectors CSS
  3. El model de caixa
  4. Fons i vores
  5. El maneig de diferents direccions de text
  6. El contingut que es desborda
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Imatges, media i elements de formulari
  10. Aplicar estil a les taules
  11. Depurar el CSS
  12. Organitzar el CSS