CSS
Explica content, padding, border y margin, cómo se calcula el tamaño final de una caja y por qué border-box simplifica el dimensionamiento.
Cada elemento genera una o más cajas compuestas por contenido, padding, border y margin.
margin
border
padding
content.card {
width: 20rem;
padding: 2rem;
border: 1rem solid;
}Con box-sizing: content-box, width define solo el contenido. La caja border-box termina midiendo 26rem.
.card {
box-sizing: border-box;
width: 20rem;
padding: 2rem;
border: 1rem solid;
}Ahora padding y border quedan dentro de las 20rem. El content box se reduce.
Reset común:
*,
*::before,
*::after {
box-sizing: border-box;
}Margin crea espacio exterior. No se incluye dentro de width ni siquiera con border-box.
Un block box suele ocupar el inline size disponible. Un inline box participa en líneas y width/height no se comportan como en block.
span {
display: inline-block;
}Inline-block mantiene participación inline con una caja dimensionable.
Los porcentajes de padding se resuelven respecto al inline size del containing block, incluso en padding-block.
.button {
border: 1px solid;
outline: 2px solid;
}Border participa en el box model. Outline normalmente no ocupa espacio y puede dibujarse fuera.
Elementos inline que se fragmentan entre líneas pueden controlar cómo se repiten fondo, padding y border mediante box-decoration-break.
Flex y Grid items pueden conservar una min-size automática basada en contenido, provocando overflow aunque width parezca flexible.
.item {
min-inline-size: 0;
}Permite encoger cuando el diseño realmente lo requiere.
¿Cuánto mide la border box con width 200px, padding 20px y border 5px bajo content-box?
250px: 200 de contenido, 40 de padding y 10 de border.
Dimensionamiento intrínseco explica cuánto quiere medir una caja según su contenido.