This translation is in progress.

La propietat CSS box-sizing s'utilitza per modificar el model de caixa CSS predeterminat usat per calcular l'amplada i l'alçada dels elements.

/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;

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

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.

La propietat box-sizing es pot utilitzar per ajustar aquest comportament:

  • content-box é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.
  • border-box 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.

Alguns experts recomanen que els desenvolupadors web considerin aplicar rutinariament box-sizing: border-box a tots els elements.

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 width: 100%  i un fons blau pàl·lid.

  • El primer escenari utilitza per defecte box-sizing: content-box. El DIV fill no té farcit ni cap vora, i s'adapta perfectament a l'interior del seu pare.
  • El segon escenari utilitza per defecte box-sizing: content-box. 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.
  • El tercer escenari utilitza box-sizing: border-box. El DIV fill ara s'adapta perfectament a l'interior del seu pare, ja que el seu width: 100% representa el farciment i la vora.

Initial valuecontent-box
Applies toall elements that accept width or height
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxi

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

Valors

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

Sintaxi formal

content-box | border-box

Exemple

HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

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;
}

Resultat

Especificacions

Especificació Estat Comentari
CSS Basic User Interface Module Level 3
The definition of 'box-sizing' in that specification.
Candidate Recommendation Definició inicial.
Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic 1.0 -webkit[1]
10.0
(Yes)-webkit
(Yes)

1.0 (1.7 or earlier)-moz[1]
29.0 (29.0)[2]

8.0[1]

7.0 3.0 (522)-webkit
5.1[3]
padding-box No support No support 1.0 (1.7 or earlier)-moz[1]
29.0 (29.0)
Eliminat a 50.0 (50.0)
No support No support No support
Descripció Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suport bàsic 2.1-webkit[1]
4.0
(Yes)-webkit
(Yes)
1.0 (1.0)-moz[1]
29.0 (29.0)[2]
9.0 (Yes) (Yes)
padding-box No support No support 1.0 (1.0)-moz[1]
29.0 (29.0)
Eliminat a 50.0 (50.0)
No support No support No support

[1] box-sizing no es respectat quan l'alçada es calcula a partir de 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 currentStyle retorna el valor correcte de height.

[2] A més del suport no prefixat, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) va afegir suport per a una versió prefixada -webkit de la propietat per raons de compatibilitat web darrere de la preferència layout.css.prefixes.webkit, per defecte a false. Des de Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) la preferència per defecte és true.

[3] El prefix de proveïdor -webkit s'ha eliminat a 534.12.

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,