El model de caixa

Tot el que hi ha en CSS té una caixa que ho envolta, i entendre aquestes caixes és clau per a poder crear dissenys amb CSS o alinear els elements amb altres elements. En aquest article analitzarem adequadament el model de caixes CSS perquè puguis dur a terme tasques de disseny de pàgines web més complexes amb una bona comprensió de la manera com funcionen, i en coneixerem la terminologia relacionada.

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

Caixes en bloc i en línia

En CSS en general hi ha dos tipus de caixes: caixes de bloc i caixes de 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 una caixa es defineix com un bloc, es comporta de les maneres següents:

  • La caixa s’estén en la direcció de la línia i omple tot l’espai disponible de l’element que la conté. En la majoria dels casos, això significa que la caixa s’amplia tant com el seu contenidor i omple el 100% de l’espai disponible.
  • La caixa crea un salt de línia i genera una línia nova.
  • Es respecten les propietats d’amplada (width) i alçada (height).
  • L'àrea de farciment, el marge i la mantenen allunyats de la caixa la resta d’elements.

Si no és que decidim canviar el tipus de visualització a inline (en línia), els elements com ara els títols d’encapçalament (per exemple, <h1>) o els paràgrafs, <p>, utilitzen per defecte el tipus de visualització block.

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

  • La caixa no crea un salt de línia i genera una línia nova.
  • Les propietats width i height no s'apliquen.
  • L'àrea de farciment, el marge i les vores s’apliquen, però no mantenen allunyades la resta de caixes en línia.

Els elements <a>, que s’usa per als enllaços, <span>, <em> i <strong> són altres exemples d’elements que es mostren en línia per defecte.

El tipus de caixa que s’aplica a un element està definit pels valors de la propietat display, com block i inline, i es relaciona amb el valor outer de display.

A part: tipus de visualització interior i exterior

Aquest és un bon moment per explicar també els tipus de visualització inner i outer. Com ja hem esmentat, les caixes CSS tenen un tipus de visualització outer, que especifica si la caixa es comporta com un element de bloc o de 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. Per defecte, els elements que hi ha a l’interior d’una caixa es disposen segons el flux normal, que significa que es comporten igual que qualssevol altres elements de bloc i de línia (com s’explica més amunt).

Tanmateix, podem canviar el tipus de visualització inner (interior) amb els valors de display, com ara flex. Si en un element establim display: flex;, el tipus de visualització outer (exterior) és block, però el tipus de visualització inner es canvia per flex. Els fills directes d’aquesta caixa es converteixen en elements flexibles i es disposen d’acord amb les regles que s’especifiquen en 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 de bloc i de línia, consulta la guia MDN per a les Disposicions de bloc i de línia.

Quan avancis a l'article Disseny de pàgines web amb CSS, trobaràs flex i els diversos valors inner que pots donar a les teves caixes, per exemple, grid.

Tanmateix, la disposició de bloc i de línia és la manera com es comporten les coses en web per defecte. Com hem dit abans, de vegades es coneix com el flux normal, perquè sense cap altra instrucció, les nostres caixes es comporten com elements de bloc o de línia.

Exemples de diferents tipus de visualització

Avancem i donem una ullada a uns quants exemples. A continuació es mostren tres elements HTML diferents, tots ells amb una visualització exterior de tipus block. El primer és un paràgraf amb una vora que s’ha afegit amb CSS. El navegador el representa com una caixa amb un comportament de tipus bloc, de manera que el paràgraf comença en una línia nova i ocupa tota l'amplada disponible.

El segon és una llista amb una disposició de tipus display: flex, que estableix una disposició de tipus flex per als elements de dins del contenidor, però la llista en si mateixa és una caixa que té un comportament de tipus bloc i, com el paràgraf, ocupa tota l’amplada del contenidor i crea un salt de línia que genera una línia nova.

A sota hi ha un paràgraf a nivell de bloc, dins del qual hi ha dos elements <span>. Aquests elements normalment tindrien un comportament de tipus inline, però un dels elements té una classe amb comportament de tipus bloc i l'hem configurada amb la declaració display: block.

 

Podem observar com es comporten els elements inline en l'exemple següent. Els elements <span> del primer paràgraf són elements de línia per defecte i no creen salts de línia nous.

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

Per acabar, hi ha dos paràgrafs configurats amb display: inline. El contenidor de línia amb comportament flex i els paràgrafs es combinen en una sola línia, en lloc de generar línies noves, com ho farien si es configuraven com elements de bloc.

En l'exemple pots alternar entre aquests modes de visualització si canvies de display: inline a display: block o de display: inline-flex a display: flex.

 

En articles posteriors trobaràs coses com ara el comportament de tipus flex; de moment has de recordar que canviar el valor de la propietat display pot canviar el tipus de visualització exterior d’una caixa del comportament de bloc al de línia, i això canvia la manera com es distribueix al costat d’altres elements en la composició de la pàgina web.

A la resta de l’article ens centrarem en el tipus de visualització exterior.

Què és el model de caixes CSS?

El model complet de caixes CSS s'aplica a les caixes amb comportament de bloc; les caixes amb comportament de línia només utilitzen una mica del comportament definit en el model de caixes. El model defineix com funcionen conjuntament les diferents parts que constitueixen una caixa (el marge, la vora, l'àrea de farciment i el contingut) per a crear una caixa que pots veure a la pàgina web. Per complicar-ho encara una mica més, hi ha un model de caixes estàndard i un model de caixes alternatiu.

Parts d'una caixa

Per crear una caixa amb comportament de 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 un espai en blanc; la mida es pot controlar amb la propietat padding i d’altres de relacionades.
  • La vora de la caixa: La vora envolta el contingut i qualsevol àrea de farciment. La mida i l’estil es poden controlar amb la propietat border i d’altres de 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 un espai en blanc entre la caixa i la resta d’elements. La mida es pot controlar amb la propietat margin i d’altres de relacionades.

El diagrama següent mostra aquestes capes:

Diagrama del model de caixes

El model de caixes CSS estàndard

En el model de caixes estàndard, si es dona a la caixa els atributs width i height, això l'amplada i l'alçada del contingut de la caixa. A continuació s'afegeix a l'amplada i l'alçada qualsevol àrea de farciment i vora, i això dona la mida total de la caixa. Això es mostra a la imatge de sota.

Suposem que la caixa té el CSS definit pels atributs width, height, margin, border i padding següents:

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

L’espai que ocupa la nostra caixa segons el model de caixa estàndard és de 410 px (350 + 25 + 25 + 5 + 5) i l’alçada de 210 px (150 + 25 + 25 + 5 + 5), perquè l'àrea de farciment i la vora s'afegeixen a l'amplada útil que la caixa utilitza per al contingut.

Exemple de mida d’una caixa en el model de caixa estàndard.

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

El model de caixes CSS alternatiu

Pots pensar que resulta una mica incòmode haver de sumar la vora i l'àrea de farciment per a obtenir la mida real de la caixa, i tens raó! Per aquest motiu, el CSS va introduir un model de caixes alternatiu poc després de crear el model de caixes estàndard. Amb aquest model, totes les amplades de caixa són les amplades de caixa visibles en la pàgina; per tant, l'amplada de l'àrea de contingut és aquella amplada sense l'amplada de l'àrea de farciment ni de la vora. El mateix CSS que hem fet servir en l'exemple anterior donaria el resultat següent (amplada = 350 px, alçada = 150 px).

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

Per defecte, els navegadors utilitzen el model de caixes estàndard. Si vols activar el model alternatiu per a un element, ho pots fer amb la configuració de box-sizing: border-box. Amb això dius al navegador que prengui la vora de la caixa com la zona definida per totes les mides que has definit.

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

Si vols que tots els teus elements utilitzin el model de caixes alternatiu, elecció habitual entre els desenvolupadors, configura la propietat box-sizing en l’element <html>, i a continuació configura tots els altres elements perquè heretin aquest valor, com es veu en l'exemple següent. Si vols entendre el concepte que hi ha al darrere, consulta l'article sobre trucs de CSS sobre les mides de les caixes.

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 caixes alternatiu i no tenia cap mecanisme disponible per canviar-lo.

Jugar amb els models de caixes

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

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

 

Nota: Pots trobar la solució d’aquesta activitat aquí.

Utilitza les DevTools del navegador per veure el model de caixes

Les eines de desenvolupador dels navegadors poden facilitar la comprensió del model de caixes. Si inspecciones un element amb el DevTools del Firefox, pots veure la mida que té l’element, i el marge, l’àrea de farciment i la vora. Fer una inspecció com aquesta d’un element és una bona manera de saber si la caixa té realment la mida que et penses que té.

Inspecció d’un element segons el model de caixes amb Firefox DevTools

Marges, àrees de farciment i vores

Ja has vist les propietats margin, padding i border en l'exemple anterior. En aquest exemple utilitzem les propietats abreviades, que 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. Manté la resta d’elements lluny de la caixa. Els marges poden tenir valors positius o negatius. Si estableixes un marge negatiu en un costat de la caixa, altres elements de la caixa s’hi poden superposar. Tant si utilitzes el model de caixes estàndard com el model alternatiu, el marge se suma sempre a la mida especificada per a la caixa visible.

Podem controlar tots els marges d’un element alhora amb la propietat margin, o bé per cada costat de manera individual amb les propietats equivalents:

Prova de canviar els valors del marge en l’exemple següent i observa com s’empeny la caixa a causa de l’espai que es crea o s’elimina (si és un marge negatiu) entre aquest element i l’element que conté.

 

Col·lapse del marge

Un punt clau per a entendre els marges és el concepte de col·lapse del marge. Quan els marges de dos elements es toquen, es combinen i es converteixen en un sol marge, que és la mida del marge més gran.

En l’exemple següent hi ha 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 col·lapsen, de manera que el marge efectiu entre les caixes és de 50 píxels, i no el total dels dos marges.

Prova d’establir la propietat margin-top del segon paràgraf a 0. El marge visible entre els dos paràgrafs no canvia: conserva els 50 píxels que s’han establert per al bottom-margin del primer paràgraf.

 

Hi ha diverses normes que dicten quan els marges col·lapsen i quan no. Per a més informació, consulta amb detall la pàgina sobre el col·lapse del marge. De moment és important que recordis que els marges col·lapsen. Si crees espai amb marges i no obtens l’espai que esperes, és probable que tinguis un col·lapse de marges.

Vores

La vora s’estableix entre el marge i l'àrea de farciment d'una caixa. Si empres el model de caixes estàndard, la mida de la vora s’afegeix a les de width i height de la caixa. Si utilitzes el model de caixes alternatiu, la mida de la vora fa més petita la caixa de contingut, perquè ocupa una mica de les width i height disponibles.

Les vores ofereixen moltes possibilitats de dissenys: hi ha quatre vores i cada vora pot tenir un estil, una amplada i un color, que podem definir.

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

Per establir propietats diferents per a cada costat de vora, pots utilitzar:

Per a establir l'amplada, l’estil o el color de tots els costats alhora, utilitza les propietats següents:

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

En l'exemple següent hem utilitzat diverses propietats abreviades i sense abreviar per a crear vores. Juga amb les diferents propietats i comprova que n’entens el funcionament. Les pàgines de MDN sobre les propietats de les vores proporcionen informació sobre els diversos 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 hi pot haver àrees de farciment negatives, de manera que el valor ha de ser 0 o un valor positiu. Qualsevol fons que apliques al teu element es mostra darrere de l'àrea de farciment, i normalment s'utilitza per a mantenir el contingut allunyat de la vora.

Podem controlar l'àrea de farciment de cadascun dels costats d’un element amb la propietat padding, o bé cadascuna de les àrees de farciment de cada costat amb les propietats equivalents:

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

També pots canviar el farciment en la classe .container, que deixa un espai entre el contenidor i la caixa. Pots canviar l'àrea de farciment de qualsevol element, i es fa un espai entre la vora i el que hi ha dins de l'element.

 

El model de caixes i les caixes amb comportament de línia

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

En l'exemple següent hi ha un <span> dins d'un paràgraf i hi hem aplicat els atributs width, height, margin, border i padding. Observa que l’amplada i l’alçada s’ignoren. Es respecta el marge, l'àrea de farciment i la vora, però no es canvia la relació de la resta de continguts amb la nostra caixa amb comportament de línia, i per tant l'àrea de farciment i la vora s’encavalquen amb altres paraules del paràgraf.

 

Ús de display: inline-block

Hi ha un valor especial de l’atribut display que proporciona un punt intermedi entre inline i block. Això és útil per a situacions en què no vols que un article generi una línia nova, però vols que respecti l’amplada (width) i l’alçada (height) i evitar que es superposin.

Un element display: inline-block constitueix un subconjunt dels elements de bloc que ja coneixem:

  • Es respecten les propietats width i height.
  • padding, margin i border mantenen altres elements allunyats de la caixa.

Tanmateix, no es genera una línia nova i només es fa més gran que el contingut si afegeixes explícitament les propietats width i height.

En l'exemple següent hem afegit al nostre element <span>la declaració display: inline-block. Fes la prova de canviar-ho per display: block o elimina del tot aquesta línia i observa quina diferència hi ha entre els dos models de visualització.

 

Això pot ser útil si vols donar a un enllaç una àrea de sensibilitat més gran amb padding. L’element <a> és un element de línia, com <span>; pots utilitzar display: inline-block per configurar l'àrea de farciment de manera que a un usuari li resulti més fàcil fer clic a l'enllaç.

Això es veu amb força freqüència en les barres de navegació. La barra de navegació següent es mostra en una fila gràcies a la propietat flexbox, i hem afegit àrea de farciment a l'element <a> perquè volem canviar el color de fons (background-color) quan es passa per sobre de <a> amb el cursor del ratolí. L'àrea de farciment sembla que s’encavalca amb la vora de l’element <ul>. Això és perquè <a> és un element en línia.

Afegeix display: inline-block a la regla amb el selector .links-list a i observa que aquest problema es soluciona amb l'àrea de farciment perquè els altres elements la respecten.

Resum

Això és el que has d’entendre sobre el model de caixes. Potser voldràs tornar a aquest article en el futur si les mides de les caixes et confonen.

En l’article següent analitzem com es poden emprar fons i vores per a fer més interessants les teves caixes.

En aquest mòdul

  1. La cascada i l'herència
  2. Els selectors CSS
  3. El model de caixes
  4. Fons i vores
  5. El tractament del text en diverses direccions
  6. El desbordament dels continguts
  7. Els valors i les unitats
  8. El dimensionament dels elements amb CSS
  9. Imatges, mèdia i controls de formulari
  10. Aplicar estil a les taules
  11. Depura el teu CSS
  12. Organitza el teu CSS