Box Sizing

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 39 de 76.

No CSS, box-sizing é uma propriedade que determina como a largura e a altura totais de um elemento são calculadas. Por padrão, as propriedades width e height incluem apenas o tamanho do conteúdo e não levam em conta o preenchimento (padding), bordas ou margens. No entanto, ao usar a propriedade box-sizing, você pode alterar esse comportamento e fazer com que as propriedades width e height incluam também os tamanhos de preenchimento e borda.

Isso pode simplificar os cálculos de layout e evitar problemas inesperados de dimensionamento.

Aqui está a sintaxe básica para usar a propriedade box-sizing:

selector {
    box-sizing: value;
}

value: O comportamento de box-sizing desejado, que pode ser um dos seguintes:

content-box: Este é o valor padrão. As propriedades width e height incluem apenas o tamanho do conteúdo. Preenchimento, bordas e margens são adicionados fora da largura e altura especificadas.

border-box: As propriedades width e height incluem o conteúdo, padding e tamanhos de borda. As margens ainda são adicionadas fora do elemento.

Por exemplo:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Comportamento padrão */
}

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

Neste exemplo, o elemento <div> tem um valor de box-sizing de content-box. Isso significa que a largura real renderizada do <div> será 300px (conteúdo) + 40px (padding esquerdo e direito) + 10px (borda esquerda e direita) = 350px. A altura será calculada de forma semelhante.

Por outro lado, o elemento com a classe container tem um valor de box-sizing de border-box. Neste caso, a width especificada de 400px incluirá o conteúdo, o padding e a borda. A área de conteúdo real encolherá para acomodar o padding e a borda, resultando em uma largura de conteúdo de 400px - 60px (padding esquerdo e direito) - 20px (borda esquerda e direita) = 320px. A altura será calculada de forma semelhante.

Desafio

Fácil

Você recebeu um documento HTML com duas divisões (<div>), cada uma com uma classe diferente. Sua tarefa é usar a propriedade box-sizing para controlar como a largura e a altura desses elementos são calculadas. Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe <strong>content-box-div</strong>. Defina o width como 300px, o height como 200px, o padding como 20px, o border como 5px solid blue e o box-sizing como content-box.
Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe <strong>border-box-div</strong>. Defina o width como 300px, o height como 200px, o padding como 20px, o border como 5px solid red e o box-sizing como border-box.

Folha de consulta

A propriedade box-sizing determina como a largura e a altura totais de um elemento são calculadas:

selector {
    box-sizing: value;
}

Valores:

content-box (padrão): A largura e a altura incluem apenas o tamanho do conteúdo. O preenchimento (padding) e as bordas são adicionados por fora.
border-box: A largura e a altura incluem o conteúdo, o preenchimento (padding) e o tamanho das bordas. As margens ainda são adicionadas por fora.

/* 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) */
}

Experimente você mesmo

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