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

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

Valores

Valor	Descripción
`content-box`	Tanto el `padding` como el `border` expanden el bloque.
`border-box`	Ni el `padding` ni el `border` expanden el bloque.

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:

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

#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:

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

#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:

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

#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:

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

#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

la propiedad outline,
que crea un borde que no expande el elemento