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, as bordas ou as margens. No entanto, usando a propriedade box-sizing, você pode alterar esse comportamento e fazer com que as propriedades width e height incluam também os tamanhos do preenchimento e da borda.

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

Veja 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 content. O padding, o border e as margens são adicionados fora do width e height especificados.

border-box: As propriedades width e height incluem os tamanhos de content, padding e border. 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; /* Default behavior */
}

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

Neste exemplo, o elemento <div> tem um valor box-sizing de content-box. Isso significa que a largura real renderizada do <div> será 300px (conteúdo) + 40px (preenchimento 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 igual a border-box. Nesse caso, a width especificada de 400px incluirá o content, o padding e a border. A área real de content diminuirá para acomodar o padding e a border, resultando em uma largura de content de 400px - 60px (padding esquerdo e direito) - 20px (border esquerda e direita) = 320px. A height será calculada de forma semelhante.

Desafio

Fácil

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

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

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>