box-sizing

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
Computed valuecom s'especifica
Animation typediscrete

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.
Recommendation DefiniciĂł inicial.
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
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 This API has not been standardized. This deprecated API should no longer be used, but will probably still work. 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 This API has not been standardized. This deprecated API should no longer be used, but will probably still work. 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é