Box Sizing

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 39 de 76.

En CSS, box-sizing es una propiedad que determina cómo se calculan el ancho y el alto total de un elemento. Por defecto, las propiedades width y height solo incluyen el tamaño del contenido y no tienen en cuenta el relleno (padding), los bordes o los márgenes. Sin embargo, al usar la propiedad box-sizing, puedes cambiar este comportamiento y hacer que las propiedades width y height también incluyan los tamaños del relleno y del borde.

Esto puede simplificar los cálculos de diseño y evitar problemas de dimensionamiento inesperados.

Aquí está la sintaxis básica para usar la propiedad box-sizing:

selector {
    box-sizing: value;
}

value: El comportamiento de box-sizing deseado, que puede ser uno de los siguientes:

content-box: Este es el valor por defecto. Las propiedades width y height solo incluyen el tamaño del contenido. El padding, los bordes y los márgenes se añaden fuera de la anchura y altura especificadas.

border-box: Las propiedades width y height incluyen el contenido, el relleno (padding) y el tamaño del borde. Los márgenes se siguen añadiendo fuera del elemento.

Por ejemplo:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Comportamiento por defecto */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

En este ejemplo, el elemento <div> tiene un valor de box-sizing de content-box. Esto significa que el ancho renderizado real del <div> será 300px (contenido) + 40px (padding izquierdo y derecho) + 10px (borde izquierdo y derecho) = 350px. La altura se calculará de forma similar.

Por otro lado, el elemento con la clase container tiene un valor de box-sizing de border-box. En este caso, el width especificado de 400px incluirá el contenido, el relleno (padding) y el borde. El área de contenido real se reducirá para acomodar el relleno y el borde, lo que resulta en un ancho de contenido de 400px - 60px (relleno izquierdo y derecho) - 20px (borde izquierdo y derecho) = 320px. La altura se calculará de manera similar.

Desafío

Fácil

Se te proporciona un documento HTML con dos divisiones (<div>), cada una con una clase diferente. Tu tarea es utilizar la propiedad box-sizing para controlar cómo se calculan el ancho y el alto de estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div> con la clase <strong>content-box-div</strong>. Establece el width a 300px, el height a 200px, el padding a 20px, el border a 5px solid blue, y el box-sizing a content-box.
Escribe una regla CSS que apunte al elemento <div> con la clase <strong>border-box-div</strong>. Establece el width a 300px, el height a 200px, el padding a 20px, el border a 5px solid red, y el box-sizing a border-box.

Hoja de referencia

La propiedad box-sizing determina cómo se calculan el ancho y el alto total de un elemento:

selector {
    box-sizing: value;
}

Valores:

content-box (predeterminado): El ancho y el alto solo incluyen el tamaño del contenido. El relleno (padding) y los bordes se añaden por fuera.
border-box: El ancho y el alto incluyen el contenido, el relleno (padding) y el tamaño del borde. Los márgenes se siguen añadiendo por fuera.

/* content-box example */
div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
    /* Total width: 300px + 40px + 10px = 350px */
}

/* border-box example */
.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
    /* Total width: 400px (content shrinks to fit) */
}

Pruébalo tú mismo

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>