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 totales de un elemento. De forma predeterminada, las propiedades width y height solo incluyen el tamaño del contenido y no tienen en cuenta el relleno, los bordes ni los márgenes. Sin embargo, al usar la propiedad box-sizing, puedes cambiar este comportamiento y hacer que las propiedades width y height incluyan también los tamaños del relleno y del borde.

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

Esta es la sintaxis básica para usar la propiedad box-sizing:

selector {
    box-sizing: value;
}

value: El comportamiento de Sizing deseado, que puede ser uno de los siguientes:

content-box: Este es el valor predeterminado. Las propiedades width y height solo incluyen el tamaño del content. El padding, los bordes y los márgenes se agregan fuera del width y height especificados.

border-box: Las propiedades width y height incluyen los tamaños de content, padding y border. Los márgenes aún se agregan fuera del elemento.

Por ejemplo:

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

.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 elemento <div> será de 300px (content) + 40px (padding izquierdo y derecho) + 10px (border 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 content, padding y border. El área de content real se reducirá para adaptarse al padding y al border, lo que dará como resultado un width de content de 400px - 60px (padding izquierdo y derecho) - 20px (border izquierdo y derecho) = 320px. El height se calculará de forma 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 la altura de estos elementos. Sigue los pasos que se indican a continuación:

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

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>