Con box-sizing: border-box, un elemento de width: 200px con 20px de padding y 2px de borde se muestra…
Opciones
- Con 244px de ancho
- Con 200px de ancho en total (Opción correcta)
- Con 220px de ancho
- Con 180px de ancho
Respuesta
Con 200px de ancho en total
Por qué
Cada elemento es una caja: contenido + padding + borde (+ margen por fuera).
Con el content-box por defecto, width se aplica solo al contenido, así que la caja mide 200 + 2×20 + 2×2 = 244px.
Con border-box, width incluye padding y borde, así que la caja mide exactamente 200px. Casi todos los proyectos fijan * { box-sizing: border-box } porque es más fácil de razonar.
Recuerda
border-box: width incluye padding y borde.