Digamos que você tenha este pedaço de HTML:

<p>Eu sou um parágrafo de texto que contém algumas palavras.</p>

Então você escreve este CSS para ele:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

O conteúdo sairia do seu elemento e teria 142px de largura, em vez de 100px. Por que?! O box model é a base fundamental do CSS e entender como ele funciona, como é afetado por outros aspectos do CSS e, mais importante, como você pode controlá-lo ajudará você a escrever um CSS mais previsível.

Uma coisa muito importante para se lembrar ao escrever CSS, ou trabalhar na web como um todo, é que tudo exibido pelo CSS é uma caixa. Seja uma caixa que usa border-radius para ficar semelhante a um círculo ou apenas algum texto: a principal coisa a lembrar é que são todas caixas.

Conteúdo e dimensionamento

As caixas têm comportamento diferente com base em seu valor de display, suas dimensões definidas e o conteúdo que reside dentro delas. Esse conteúdo pode ser ainda mais caixas — geradas por elementos filho — ou conteúdo de texto simples. De qualquer forma, esse conteúdo afetará o tamanho da caixa por padrão.

Você pode controlar isso usando o dimensionamento extrínseco (extrinsic sizing) ou pode continuar deixando o navegador tomar decisões por você com base no tamanho do conteúdo, usando o dimensionamento intrínseco (intrinsic sizing).

Vamos ver rapidamente a diferença, usando uma demonstração para nos ajudar.

Extrinsic sizing vs intrinsic sizing

A demonstração tem as palavras "CSS is awesome" em uma caixa com dimensões fixas e uma borda grossa. A caixa tem uma largura definida, portanto é dimensionada extrinsecamente (Extrinsic sizing). Ele controla o dimensionamento de seu conteúdo filho. O problema com isso, porém, é que a palavra "awesome" é muito larga para a caixa, então ela transborda para fora da caixa de border box pai. Uma maneira de evitar esse estouro é permitir que a caixa seja intrinsecamente dimensionada (intrinsic sizing), definindo a largura do elemento ou, nesse caso, definindo o width como min-content. A palavra-chave min-content diz à caixa para ser tão larga quanto a largura mínima intrínseca (intrinsic) de seu conteúdo (a palavra "awesome"). Isso permite que a caixa se encaixe perfeitamente em "CSS is awesome".

Vejamos algo mais complexo para ver o impacto de tamanhos diferentes no conteúdo real:

Extrinsic sizing vs intrinsic sizing

Use setting

intrinsic sizing Desativado

240px400px

Ative e desative o intrinsic sizing para ver como você pode obter mais controle com o extrinsic sizing e permitir que o conteúdo tenha mais controle com o intrinsic sizing. Para ver o efeito que o dimensionamento intrínseco e extrínseco tem, adicione algumas frases de conteúdo ao cartão. Quando esse elemento está usando extrinsic sizing, há um limite de quanto conteúdo você pode adicionar antes que ele ultrapasse os limites do elemento, mas esse não é o caso quando o intrinsic sizing é ativado.

Por padrão, esse elemento tem largura definida. Essas dimensões fornecem limites estritos para tudo dentro do elemento, que será respeitado, a menos que o conteúdo seja muito grande para a caixa, caso em que ocorrerá um estouro visível. Você pode ver isso em ação alterando o conteúdo da legenda, abaixo da imagem da flor, para algo que exceda a altura da caixa, que é algumas linhas de conteúdo.

Ao alternar para o intrinsic sizing, você permite que o navegador tome decisões por você, com base no tamanho do conteúdo da caixa. É muito mais difícil haver estouro com intrinsic sizing porque nossa caixa será redimensionada com seu conteúdo, em vez de tentar dimensionar o conteúdo. É importante lembrar que esse é o comportamento flexível padrão de um navegador. Embora o extrinsic sizing forneça mais controle na superfície, o intrinsic sizing fornece mais flexibilidade, na maioria das vezes.

The areas of the box model

As caixas são compostas de áreas distintas do modelo de caixa que fazem um trabalho específico.

As quatro áreas principais do modelo de caixa: content box, padding box, border box e margin box.

Você começa com a content box, que é a área em que o conteúdo reside. Como você aprendeu antes: esse conteúdo pode controlar o tamanho de seu pai, portanto, geralmente é a área de tamanho mais variável.

A padding box envolve a content box e é o espaço criado pela propriedade de padding. Como o preenchimento(padding) está dentro da caixa, o plano de fundo da caixa ficará visível no espaço criado. Se nossa caixa tiver regras de overflow definidas, como overflow: auto ou overflow: scroll, as barras de rolagem também ocuparão esse espaço.

A border box envolve o padding e seu espaço é ocupado pelo valor do border. A border box são os limites da sua caixa e a border edge é o limite do que você pode ver visualmente. A propriedade border é usada para enquadrar visualmente um elemento.

A área final, a margin box, é o espaço ao redor de sua caixa, definido pela regra de margin em sua caixa. Propriedades como o outline e a box-shadow também ocupam esse espaço porque são pintadas na parte superior, portanto, não afetam o tamanho da nossa caixa. Você poderia ter uma outline-width de 200px em nossa caixa e tudo dentro e incluindo a caixa de borda seria exatamente do mesmo tamanho.

Uma analogia útil

O box-model é complexo de entender, então vamos recapitular o que você aprendeu com uma analogia.

Neste diagrama, você tem três porta-retratos montados em uma parede, um ao lado do outro. O diagrama possui rótulos que associam elementos do quadro ao box-model.

Para específicar esta analogia:

• O content-box é a arte.
• O padding-box é o branco fosco, entre a moldura e a arte.
• O border-box é a moldura, fornecendo uma borda literal para a arte.
• O margin-box é o espaço entre cada quadro.
• O shadow ocupa o mesmo espaço que a caixa de margem.

Debugando o box-model

O DevTools do seu Navegador fornece uma visualização dos cálculos do box-model de uma caixa selecionada, o que pode ajudá-lo a entender como o box-model funciona e, mais importante, como ele está afetando o site em que você está trabalhando.

1: Abra o seu DevTools: Para abrir o seu Devtools basta clicar com o botão direito do seu mouse e selecionar a opção "Inspecionar Elemento" ou em Inglês: "Inspect".

2: Selecione um Elemento: Selecione um elemento no seu site no DevTools para ver os detalhes do box-model.

3: Visualize o box-model: Agora você pode ver os detalhes do box-model do elemento selecionado. Você pode ver o tamanho de cada área do box-model, bem como o tamanho total da caixa. Você também pode ver o tamanho de cada área do box-model em relação ao elemento pai.

Controlando o box-model

Para entender como controlar o modelo de caixa, primeiro você precisa entender o que acontece no seu navegador.

Todo navegador aplica uma folha de estilo de agente do usuário a documentos HTML. O CSS usado varia entre cada navegador, mas eles fornecem padrões sensatos para facilitar a leitura do conteúdo. Eles definem como os elementos devem parecer e se comportar se não houver CSS definido. É nos user agent styles que a display padrão de uma caixa também é definida. Por exemplo, se estivermos em um fluxo normal, o valor de display padrão de um elemento <div> é block, um <li> tem um valor de exibição padrão de list-item e um <span> tem um valor de display padrão de inline.

Um elemento inline possui margin block, mas outros elementos não a respeitam. Use inline-block e esses elementos respeitarão a margem do bloco, enquanto o elemento mantém a maioria dos mesmos comportamentos que tinha como elemento inline. Um item de block, por padrão, preencherá o espaço inline disponível, enquanto os elementos inline e inline-block serão tão grandes quanto seu conteúdo.

Juntamente com a compreensão de como os user agent styles afetam cada caixa, você também precisa entender o box-sizing, que informa à nossa caixa como calcular o tamanho da caixa. Por padrão, todos os elementos têm o seguinte estilo de agente do usuário: box-sizing: content-box;.

Ter content-box como o valor de box-sizing significa que quando você definir dimensões, como width e height, elas serão aplicadas à content box. Se você definir padding e border, esses valores serão adicionados ao tamanho da content box.

.minha-caixa {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

Qual a largura que você acha que .minha-caixa terá?

A largura real desta caixa será 260px. Como o CSS usa por padrão o box-sizing: content-box, a largura aplicada é a largura do conteúdo, padding e border em ambos os lados são adicionados a isso. Portanto, 200px para o conteúdo + 40px de preenchimento + 20px de borda totalizam uma largura visível de 260px.

Você pode controlar isso, porém, fazendo a seguinte modificação para usar o modelo de caixa alternativo, border-box:

.minha-caixa {
  box-sizing: border-box; /* <- Adicionando Border-Box  */
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

Esse modelo alternativo de caixa diz ao CSS para aplicar a width ao border-box em vez da content-box. Isso significa que nossa border e padding são empurrados para dentro e, como resultado, quando você define .minha-caixa para 200px de largura: na verdade, ele é renderizado com 200px de largura.

Confira como isso funciona na demonstração interativa a seguir. Observe que quando você alterna o valor do box-sizing, ele mostra - por meio de um fundo azul - qual CSS está sendo aplicado dentro de nossa caixa.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Esta regra CSS seleciona cada elemento no documento e cada pseudo elemento ::before e ::after e aplica box-sizing: border-box. Isso significa que cada elemento agora terá esse box-model alternativo.

Como o box-model alternativo pode ser mais previsível, os desenvolvedores geralmente adicionam essa regra a redefinições e normalizadores.