Propiedad box-sizing

La propiedad box-sizing permite cambiar el método de cálculo de las dimensiones de un elemento.

Por defecto, añadir padding expande el elemento: si hemos establecido un ancho width 100px y un padding-left de 20px, entonces el ancho real del elemento será 120px.

Y si además establecemos un border-left de 10px, entonces el ancho real del elemento pasará a ser 130px. Es decir, el padding y el border expanden el bloque (tanto en ancho como en alto). Este comportamiento se puede cambiar con box-sizing.

Sintaxis

cssselector {
  box-sizing: content-box | border-box;
}

Valores

Valor por defecto: content-box.

Ejemplo . Comportamiento estándar

Ahora ambos bloques tienen la misma altura y ancho, sin embargo al segundo bloque se le ha establecido padding y al primero no. Observe cómo difieren sus tamaños:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Ejemplo . Comportamiento estándar

Ahora ambos bloques tienen la misma altura y ancho, sin embargo al segundo bloque se le ha establecido un borde de 10px, y al primero no. Observe, cómo difieren sus tamaños:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Ejemplo . Comportamiento estándar

Ahora el segundo bloque tiene tanto padding como borde de 10px:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Ejemplo . Valor border-box

Añadamos al segundo elemento el valor border-box para la propiedad box-sizing. Ahora las dimensiones tanto del primero como del segundo elemento serán iguales:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Véase también