---
title: box-sizing
slug: Web/CSS/box-sizing
tags:
  - CSS
  - CSS Property
  - Reference
translation_of: Web/CSS/box-sizing
---
<div>{{CSSRef}}</div>

<p>La propietat CSS <strong><code>box-sizing</code></strong> s'utilitza per modificar el <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">model de caixa CSS</a> predeterminat usat per calcular l'amplada i l'alçada dels elements.</p>

<pre class="brush: css no-line-numbers">/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
</pre>

<p>En CSS, de manera predeterminada, l'amplada i l'alçada que s'assigna a un element només s'aplica a la caixa de contingut de l'element. Si l'element té qualsevol vora o farcit, aquest s'afegeix a l'amplada i alçada per arribar a la grandària de la caixa que es representa en la pantalla. Això significa que quan fixeu l'amplada i l'alçada, heu d'ajustar el valor que dóna per permetre qualsevol vora o farcit que pugui ser afegit. Això és especialment difícil quan s'implementa un disseny sensible.</p>

<p>La propietat <code>box-sizing</code> es pot utilitzar per ajustar aquest comportament:</p>

<ul>
 <li><code>content-box</code> és el valor predeterminat i proporciona el comportament predeterminat de box-sizing CSS. Si s'estableix l'amplada d'un element a 100 píxels, la caixa de contingut de l'element serà de 100 píxels d'amplada i l'amplada de qualsevol vora o farciment s'afegirà a l'amplada final representada.</li>
 <li><code>border-box</code> l'indica al navegador que tingui en compte qualsevol vora i farcit en el valor que s'especifiqui per a l'amplada i l'alçada. Si s'estableix l'amplada d'un element a 100 píxels, els 100 píxels inclouran qualsevol vora o farcit que s'hàgi afegit i la caixa de contingut s'encongirà per absorbir aquest ample addicional. Això generalment fa molt més fàcil la grandària dels elements.</li>
</ul>

<p>Alguns experts recomanen que els desenvolupadors web considerin <a href="https://css-tricks.com/international-box-sizing-awareness-day/">aplicar rutinariament <code>box-sizing: border-box</code> a tots els elements</a>.</p>

<div id="box-sizing">
<pre class="hidden brush: html">&lt;div class="container"&gt;

&lt;div class="parent"&gt;
  &lt;p&gt;Parent container&lt;/p&gt;
  &lt;div class="child" style="box-sizing: content-box;"&gt;
    &lt;p&gt;Child container&lt;/p&gt;
    &lt;p class="css"&gt;
    box-sizing: content-box;&lt;br/&gt;
    width: 100%;&lt;br/&gt;
    padding: 0;&lt;br/&gt;
    border-width: 0;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="parent"&gt;
  &lt;p&gt;Parent container&lt;/p&gt;
  &lt;div class="child border-padding" style="box-sizing: content-box;"&gt;
    &lt;p&gt;Child container&lt;/p&gt;
    &lt;p class="css"&gt;
    box-sizing: content-box;&lt;br/&gt;
    width: 100%;&lt;br/&gt;
    padding: 5px;&lt;br/&gt;
    border-width: 10px;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="parent"&gt;
  &lt;p&gt;Parent container&lt;/p&gt;
  &lt;div class="child border-padding"  style="box-sizing: border-box;"&gt;
    &lt;p&gt;Child container&lt;/p&gt;
    &lt;p class="css"&gt;
    box-sizing: border-box;&lt;br/&gt;
    width: 100%;&lt;br/&gt;
    padding: 5px;&lt;br/&gt;
    border-width: 10px;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
</pre>

<pre class="hidden brush: css">p {
  margin-left: 0.2em;
  font-family: "Open Sans", sans-serif;
}

.container {
  display: flex;
}

.parent {
  width: 220px;
  border: solid 10px #FFC129;
  margin: 0.8em;
}

.child {
  width: 100%;
  margin: 2em auto;
  background-color: rgba(229, 232, 252, 0.6);
}

.border-padding {
  padding: 5px;
  border: solid #5B6DCD 10px;
}

.css {
  font-family: monospace;
}
</pre>

<p>{{EmbedLiveSample("box-sizing", 1200, 340, "", "", "example-outcome-frame")}}</p>
</div>

<p>L'exemple anterior mostra tres escenaris. En cada escenari hi ha un DIV pare (amb una vora taronja) que conté un DIV fill. El fill té fixat un <code>width: 100%</code>  i un fons blau pàl·lid.</p>

<ul>
 <li>El primer escenari utilitza per defecte <code>box-sizing: content-box</code>. El DIV fill no té farcit ni cap vora, i s'adapta perfectament a l'interior del seu pare.</li>
 <li>El segon escenari utilitza per defecte <code>box-sizing: content-box</code>. El DIV fill se li ha afegit farcit i una vora. El fill es vessa fora del pare perquè el seu ample es calcula amb només el contingut: llavors s'afegeix el farciment i la vora per fer l'amplada representada.</li>
 <li>El tercer escenari utilitza <code>box-sizing: border-box</code>. El DIV fill ara s'adapta perfectament a l'interior del seu pare, ja que el seu <code>width: 100%</code> representa el farciment i la vora.</li>
</ul>

<p>{{cssinfo}}</p>

<h2 id="Sintaxi">Sintaxi</h2>

<p>La propietat <code>box-sizing</code> s'especifica com una paraula clau única seleccionada de la llista de valors a continuació.</p>

<h3 id="Valors">Valors</h3>

<dl>
 <dt><code>content-box</code></dt>
 <dd>Aquest és el valor inicial i predeterminat especificat per l'estàndard CSS. Les propietats {{Cssxref("width")}} i {{Cssxref("height")}} es mesuren incloent només el contingut, però no el farciment, la vora o el marge. Per exemple, si establiu <code>.box {width: 350px;}</code>, apliqueu <code>{border: 10px solid black;}</code> , llavors el resultat representat és una <code>caixa de width: 370px.</code></dd>
 <dd>Aquí les dimensions de l'element es calculen com: <em>amplària = amplària del contingut, i alçada = alçada del contingut (excloent els valors de vora i farciment).</em></dd>
 <dt><code>border-box</code></dt>
 <dd>Les propietats {{Cssxref("width")}} i {{Cssxref("height")}} inclouen el contingut, el farciment i la vora, però no el marge. Note that padding and border will be inside of the box e.g. <code>.box {width: 350px; border: 10px solid black;}</code> leads to a box rendered in the browser of <code>width: 350px</code>. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.</dd>
 <dd>Aquí les dimensions de l'element es calculen com: <em>amplària = vora + farciment + amplària del contingut</em>, i <em>alçada = vora + farciment + alçada del contingut</em>.</dd>
</dl>

<h3 id="Sintaxi_formal">Sintaxi formal</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Exemple">Exemple</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="content-box"&gt;Content box&lt;/div&gt;
&lt;br&gt;
&lt;div class="border-box"&gt;Border box&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

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

.border-box {
  box-sizing: border-box;
}
</pre>

<h3 id="Resultat">Resultat</h3>

<p>{{EmbedLiveSample('Exemple','auto','300')}}</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>Definició inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles"><span class="short_text" id="result_box" lang="ca"><span>Navegadors compatibles</span></span></h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td><span class="short_text" id="result_box" lang="ca"><span>Suport bàsic</span></span></td>
   <td>1.0 {{property_prefix("-webkit")}}<sup>[1]</sup><br>
    10.0</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td>
    <p>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
     {{CompatGeckoDesktop("29.0")}}<sup>[2]</sup></p>
   </td>
   <td>
    <p>8.0<sup>[1]</sup></p>
   </td>
   <td>7.0</td>
   <td>3.0 (522){{property_prefix("-webkit")}}<br>
    5.1<sup>[3]</sup></td>
  </tr>
  <tr>
   <td><code>padding-box</code>{{non-standard_inline}} {{deprecated_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
    {{CompatGeckoDesktop("29.0")}}<br>
    Eliminat a {{CompatGeckoDesktop("50.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td><span class="short_text" id="result_box" lang="ca"><span>Suport bàsic</span></span></td>
   <td>2.1{{property_prefix("-webkit")}}<sup>[1]</sup><br>
    4.0</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
    {{CompatGeckoMobile("29.0")}}<sup>[2]</sup></td>
   <td>9.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>padding-box</code>{{non-standard_inline}} {{deprecated_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
    {{CompatGeckoMobile("29.0")}}<br>
    Eliminat a {{CompatGeckoMobile("50.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] <code>box-sizing</code> no es respectat quan l'alçada es calcula a partir de {{domxref("window.getComputedStyle()")}}, en Internet Explorer (totes les versions), en Firefox anterior a la 23, i en Chrome. Edge no presenta el problema. Tingueu en compte que la propietat <code>currentStyle</code> retorna el valor correcte de <code>height</code>.</p>

<p>[2] A més del suport no prefixat, Gecko 44.0 {{geckoRelease("44.0")}} va afegir suport per a una versió prefixada <code>-webkit</code> de la propietat per raons de compatibilitat web darrere de la preferència <code>layout.css.prefixes.webkit</code>, per defecte a <code>false</code>. Des de Gecko 49.0 {{geckoRelease("49.0")}} la preferència per defecte és <code>true</code>.</p>

<p>[3] El prefix de proveïdor <code>-webkit</code> s'ha eliminat a <a href="http://trac.webkit.org/changeset/71348">534.12</a>.</p>

<h2 id="Vegeu_també"><span class="short_text" id="result_box" lang="ca"><span>Vegeu també</span></span></h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Model de caixa CSS</a></li>
</ul>