box-sizing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propiedad CSS box-sizing como el user agent debe calcular el ancho y alto total de un elemento.

Pruébalo

Por defecto en el modelo de caja de CSS, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.

La propiedad box-sizing puede ser usada para ajustar el siguiente comportamiento:

content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.
border-box le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.

Sintaxis

La propiedad box-sizing es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo.

Valores

content-box

Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades width and height no incluyen el borde, relleno o margen. Por ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un ancho de 370 pixeles.

Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.)

border-box

Las propiedad de width y height incluyen el contenido, relleno y borde pero no incluyen el margén. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el border-box para hacer que el elemento desaparezca.

Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido.

Sintaxis formal

box-sizing = 
  content-box  |
  border-box

Ejemplo

Este ejemplo muesta cómo diferentes valores de tamaño de la caja (box-sizing) alteran el tamaño desplegado de dos elementos idénticos.

HTML

html

<div class="content-box">Contenido de la caja</div>
<br />
<div class="border-box">Borde de la caja</div>

CSS

css

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Ancho  total: 160px + (2 * 20px) + (2 * 8px) = 216px
     Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px
     Ancho de la caja de contenido: 160px
     Altura de la caja de contenido: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Ancho total: 160px
     Altura total: 80px
     Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px
     Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Resultado

Especificaciones

Specification
CSS Box Sizing Module Level 3 # box-sizing

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

Modelo de caja de CSS