diff options
Diffstat (limited to 'files/ca/learn/css/building_blocks/the_box_model/index.html')
| -rw-r--r-- | files/ca/learn/css/building_blocks/the_box_model/index.html | 343 |
1 files changed, 343 insertions, 0 deletions
diff --git a/files/ca/learn/css/building_blocks/the_box_model/index.html b/files/ca/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..e0d11e7e76 --- /dev/null +++ b/files/ca/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,343 @@ +--- +title: El model de caixa +slug: Learn/CSS/Building_blocks/The_box_model +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> + +<p>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 <em>model de caixes CSS</em> 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de com funciona el CSS (consulta els <a href="/ca/docs/Learn/CSS/First_steps">Primers passos amb CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>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.</td> + </tr> + </tbody> +</table> + +<h2 id="Caixes_en_bloc_i_en_línia">Caixes en bloc i en línia</h2> + +<p>En CSS en general hi ha dos tipus de caixes: <strong>caixes de bloc</strong> i <strong>caixes de línia</strong>. 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:</p> + +<p>Si una caixa es defineix com un bloc, es comporta de les maneres següents:</p> + +<ul> + <li>La caixa crea un salt de línia i genera una línia nova.</li> + <li>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.</li> + <li>Es respecten les propietats d’amplada ({{cssxref("width")}}) i alçada ({{cssxref("height")}}).</li> + <li>El farciment, el marge i la vora allunyen la caixa de la resta d’elements.</li> +</ul> + +<p>Si no és que decidim canviar el tipus de visualització a <code>inline</code> (en línia), els elements com ara els títols d’encapçalament (per exemple, <code><h1></code>) o els paràgrafs, <code><p></code>, utilitzen per defecte el tipus de visualització <code>block</code>.</p> + +<p>Si una caixa té un tipus de visualització exterior <code>inline</code>, llavors:</p> + +<ul> + <li>La caixa no crea un salt de línia i no genera una línia nova.</li> + <li>Les propietats {{cssxref("width")}} i {{cssxref("height")}} no s'apliquen.</li> + <li>El farciment, el marge i les vores verticals s’apliquen, però no fan que la resta de caixes en línia s'allunyin.</li> + <li>El farciment, el marge i les vores horitzontals s’apliquen i fan que la resta de caixes en línia s'allunyin.</li> +</ul> + +<p>Els elements <code><a></code>, que s’usa per als enllaços, <code><span></code>, <code><em></code> i <code><strong></code> són altres exemples d’elements que es mostren en línia per defecte.</p> + +<p>El tipus de caixa que s’aplica a un element està definit pels valors de la propietat {{cssxref("display")}}, com <code>block</code> i <code>inline</code>, i es relaciona amb el valor <strong>exterior</strong> (<em>outer</em>) de <code>display</code>.</p> + +<h2 id="A_part_tipus_de_visualització_interior_i_exterior">A part: tipus de visualització interior i exterior</h2> + +<p>Aquest és un bon moment per explicar també els tipus de visualització <strong>inner</strong> i <strong>outer</strong>. Com ja hem esmentat, les caixes CSS tenen un tipus de visualització <em>outer</em> (exterior), que especifica si la caixa es comporta com un element de bloc o de línia.</p> + +<p>Les caixes també tenen un tipus de visualització <em>interna</em> (<em>inner</em>), 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 <strong><a href="/ca/docs/Learn/CSS/Disseny_CSS/Flux_normal">flux normal</a></strong>, que significa que es comporten igual que qualssevol altres elements de bloc i de línia (com s’explica més amunt).</p> + +<p>Tanmateix, podem canviar el tipus de visualització <code>inner</code> (interior) amb els valors de <code>display</code>, com ara <code>flex</code>. Si en un element establim <code>display: flex;</code>, el tipus de visualització <code>outer</code> (exterior) és <code>block</code>, però el tipus de visualització <code>inner</code> es canvia per <code>flex</code>. 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 <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a>, que veurem més endavant.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: 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 <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposicions de bloc i de línia</a>.</p> +</div> + +<p>Quan avancis a l'article Disseny de pàgines web amb CSS, trobaràs <code>flex</code> i els diversos valors <code>inner</code> que pots donar a les teves caixes, per exemple, <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> + +<p>Tanmateix, la disposició de bloc i de línia és la manera com es comporten les coses a la web per defecte. Com hem dit abans, de vegades es coneix com el <em>flux normal</em>, perquè sense cap altra instrucció, les nostres caixes es comporten com elements de bloc o de línia.</p> + +<h2 id="Exemples_de_diferents_tipus_de_visualització">Exemples de diferents tipus de visualització</h2> + +<p>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 <code>block</code>. 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.</p> + +<p>El segon és una llista amb una disposició de tipus <code>display: flex</code>, 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.</p> + +<p>A sota hi ha un paràgraf a nivell de bloc, dins del qual hi ha dos elements <code><span></code>. Aquests elements normalment tindrien un comportament de tipus <code>inline</code>, però un dels elements té una classe amb comportament de tipus bloc i l'hem configurada amb la declaració <code>display: block</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p> + +<p>Podem observar com es comporten els elements <code>inline</code> en l'exemple següent. Els elements <code><span></code> del primer paràgraf són elements de línia per defecte i no creen salts de línia nous.</p> + +<p>També hi ha un element <code><ul></code> que es pot configurar amb <code>display: inline-flex</code>, que crea una caixa amb comportament de línia al voltant d'alguns elements de tipus flex.</p> + +<p>Per acabar, hi ha dos paràgrafs configurats amb <code>display: inline</code>. 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.</p> + +<p><strong>En l'exemple pots alternar entre aquests modes de visualització si canvies de <code>display: inline</code> a <code>display: block</code> o de <code>display: inline-flex</code> a <code>display: flex</code>.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p> + +<p>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 <code>display</code> 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.</p> + +<p>A la resta de l’article ens centrarem en el tipus de visualització exterior.</p> + +<h2 id="Què_és_el_model_de_caixes_de_CSS">Què és el model de caixes de CSS?</h2> + +<p>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, el 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.</p> + +<h3 id="Parts_duna_caixa">Parts d'una caixa</h3> + +<p>Per crear una caixa amb comportament de bloc amb CSS tenim:</p> + +<ul> + <li>El <strong>contingut de la caixa</strong> (o <em>content box</em>): L'àrea on es mostra el contingut, que es pot dimensionar amb propietats com {{cssxref("width")}} i {{cssxref("height")}}.</li> + <li>El <strong>farciment de la caixa</strong> (o <em>padding box</em>): El farciment s’ubica al voltant del contingut com un espai en blanc; la mida es pot controlar amb la propietat {{cssxref("padding")}} i d’altres de relacionades.</li> + <li>La <strong>vora de la caixa</strong> (o <em>border box</em>): La vora envolta el contingut i el farciment. La mida i l’estil es poden controlar amb la propietat {{cssxref("border")}} i d’altres de relacionades.</li> + <li>El <strong>marge de la caixa</strong> (o <em>margin box</em>): El marge és la capa més externa, embolica el contingut, el farciment i la vora com espai en blanc entre la caixa i la resta d’elements. La mida es pot controlar amb la propietat {{cssxref("margin")}} i d’altres de relacionades.</li> +</ul> + +<p>El diagrama següent mostra aquestes capes:</p> + +<p><img alt="Diagrama del model de caixes" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<h3 id="El_model_de_caixes_CSS_estàndard">El model de caixes CSS estàndard</h3> + +<p>En el model de caixes estàndard, si es dona a la caixa els atributs <code>width</code> i <code>height</code>, això defineix l'amplada i l'alçada del <em>contingut de la caixa</em>. A continuació s'afegeix a l'amplada i l'alçada qualsevol farciment i vora, i això dona la mida total de la caixa. Això es mostra a la imatge de sota.</p> + +<p>Suposem que la caixa té el CSS definit pels atributs <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> i <code>padding</code> següents:</p> + +<pre class="brush: css notranslate">.box { + width: 350px; + height: 150px; + margin: 10px; + padding: 25px; + border: 5px solid black; +} +</pre> + +<p>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.</p> + +<p><img alt="Exemple de mida d’una caixa en el model de caixa estàndard." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: 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.</p> +</div> + +<h3 id="El_model_de_caixes_CSS_alternatiu">El model de caixes CSS alternatiu</h3> + +<p>Pots pensar que resulta una mica incòmode haver de sumar la vora i el 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, qualsevol amplada de caixa és l'amplada de caixa visible en la pàgina; per tant, l'amplada de l'àrea de contingut és aquella amplada menys les amplades del farciment i 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).</p> + +<p><img alt="Exemple de mida de caixa quan s’utilitza el model de caixes alternatiu." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> + +<p>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 <code>box-sizing: border-box</code>. Amb això dius al navegador que prengui la vora de la caixa com la zona definida per totes les mides que has definit.</p> + +<pre class="brush: css notranslate"><code>.box { + box-sizing: border-box; +} </code></pre> + +<p>Si vols que tots els teus elements utilitzin el model de caixes alternatiu, elecció habitual entre els desenvolupadors, configura la propietat <code>box-sizing</code> en l’element <code><html></code>, 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 <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">sobre trucs de CSS sobre les mides de les caixes</a>.</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: 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.</p> +</div> + +<h2 id="Jugar_amb_els_models_de_caixes">Jugar amb els models de caixes</h2> + +<p>En l’exemple següent pots veure dues caixes. Totes dues tenen una classe <code>.box</code>, que els proporciona els mateixos valors de <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> i <code>padding</code>. L’única diferència és que la segona caixa s’ha configurat perquè utilitzi el model de caixes alternatiu.</p> + +<p><strong>Pots canviar la mida de la segona caixa (afegint CSS a la classe <code>.alternate</code>) i fer-la coincidir amb l'alçada i l'amplada de la primera caixa?</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar la solució d’aquesta activitat <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">aquí</a>.</p> +</div> + +<h3 id="Utilitza_les_DevTools_del_navegador_per_veure_el_model_de_caixes">Utilitza les DevTools del navegador per veure el model de caixes</h3> + +<p>Les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desenvolupador dels navegadors</a> poden facilitar la comprensió del model de caixes. Si inspecciones un element amb les 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é.</p> + +<p><img alt="Inspecció d’un element segons el model de caixes amb Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> + +<h2 id="Marges_farciments_i_vores">Marges, farciments i vores</h2> + +<p>Ja has vist les propietats {{cssxref("margin")}}, {{cssxref("padding")}} i {{cssxref("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.</p> + +<p>Explorem aquestes propietats amb més detall.</p> + +<h3 id="Marges">Marges</h3> + +<p>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.</p> + +<p>Podem controlar tots els marges d’un element alhora amb la propietat {{cssxref("margin")}}, o bé per cada costat de manera individual amb les propietats equivalents:</p> + +<ul> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> +</ul> + +<p><strong>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é.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> + +<h4 id="Col·lapse_del_marge">Col·lapse del marge</h4> + +<p>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. Si un dels negatius (o ho són tots dos), la quantitat de marge negatiu és resta del total.</p> + +<p>En l’exemple següent hi ha dos paràgrafs. El paràgraf superior té un <code>margin-bottom</code> de 50 píxels. El segon paràgraf té un <code>margin-top</code> 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.</p> + +<p><strong>Prova d’establir la propietat <code>margin-top</code> 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 <code>bottom-margin</code> del primer paràgraf.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p> + +<p>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 <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">col·lapse del marge</a>. De moment l'important és 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.</p> + +<h3 id="Vores">Vores</h3> + +<p>La vora s’estableix entre el marge i el farciment d'una caixa. Si empres el model de caixes estàndard, la mida de la vora s’afegeix a les de <code>width</code> i <code>height</code> 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 <code>width</code> i <code>height</code> disponibles.</p> + +<p>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.</p> + +<p>Pots definir l'amplada, l'estil o el color de les quatre vores alhora amb la propietat {{cssxref("border")}}.</p> + +<p>Per establir propietats diferents per a cada costat de vora, pots utilitzar:</p> + +<ul> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-left")}}</li> +</ul> + +<p>Per a establir l'amplada, l’estil o el color de tots els costats alhora, utilitza les propietats següents:</p> + +<ul> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-color")}}</li> +</ul> + +<p>Per a definir l'amplada, l'estil o el color d'un sol costat, pots emprar una de les propietats següents:</p> + +<ul> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-color")}}</li> +</ul> + +<p><strong>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.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> + +<h3 id="Farciment">Farciment</h3> + +<p>El farciment es situa 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.</p> + +<p>Podem controlar l'àrea de farciment de cadascun dels costats d’un element amb la propietat {{cssxref("padding")}}, o bé cadascuna de les àrees de farciment de cada costat amb les propietats equivalents:</p> + +<ul> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> +</ul> + +<p><strong>Observa que si canvies els valors de farciment en la classe <code>.box</code> de l'exemple següent, canvia on comença el text en relació amb la caixa.</strong></p> + +<p><strong>També pots canviar el farciment en la classe <code>.container</code>, 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.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> + +<h2 id="El_model_de_caixes_i_les_caixes_amb_comportament_de_línia">El model de caixes i les caixes amb comportament de línia</h2> + +<p>Totes les opcions anteriors 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 <code><span></code>.</p> + +<p>En l'exemple següent hi ha un <code><span></code> dins d'un paràgraf i hi hem aplicat els atributs <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> i <code>padding</code>. 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> + +<h2 id="Ús_de_display_inline-block">Ús de <code>display: inline-block</code></h2> + +<p>Hi ha un valor especial de l’atribut <code>display</code> que proporciona un punt intermedi entre <code>inline</code> i <code>block</code>. Això és útil per a situacions en què no vols que un article generi una línia nova, però vols que respecti l’amplada (<code>width</code>) i l’alçada (<code>height</code>) i evitar que es superposin.</p> + +<p>Un element <code>display: inline-block</code> constitueix un subconjunt dels elements de bloc que ja coneixem:</p> + +<ul> + <li>Es respecten les propietats <code>width</code> i <code>height</code>.</li> + <li><code>padding</code>, <code>margin</code> i <code>border</code> allunyen la resta d'elements de la caixa.</li> +</ul> + +<p>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 <code>width</code> i <code>height</code>.</p> + +<p><strong>En l'exemple següent hem afegit al nostre element <code><span></code>la declaració <code>display: inline-block</code>. Fes la prova de canviar-ho per <code>display: block</code> o elimina del tot aquesta línia i observa quina diferència hi ha entre els dos models de visualització.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p> + +<p>Això pot ser útil si vols donar a un enllaç una àrea sensible més gran amb <code>padding</code>. L’element <code><a></code> és un element de línia, com <code><span></code>; pots utilitzar <code>display: inline-block</code> per configurar l'àrea de farciment de manera que a un usuari li resulti més fàcil fer clic a l'enllaç.</p> + +<p>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 <code>flexbox</code>, i hem afegit àrea de farciment a l'element <code><a></code> perquè volem canviar el color de fons (<code>background-color</code>) quan es passa per sobre de <code><a></code> amb el cursor del ratolí. El farciment sembla que s’encavalca amb la vora de l’element <code><ul></code>. Això és perquè <code><a></code> és un element en línia.</p> + +<p><strong>Afegeix <code>display: inline-block</code> a la regla amb el selector <code>.links-list a</code> i observa que aquest problema es soluciona amb l'àrea de farciment perquè els altres elements la respecten.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p> + +<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. Recordes la informació més rellevant? Trobaràs més tests per verificar que has retingut la informació abans de seguir a <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Test your skills: The Box Model</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>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.</p> + +<p>En l’article següent analitzem com es poden emprar <a href="/ca/docs/Learn/CSS/Building_blocks/Fons_i_vores">fons i vores</a> per a fer més interessants les teves caixes.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">El dimensionament dels elements amb CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i controls de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> |