O CSS Podcast - 001: o modelo de caixa
Digamos que você tenha este trecho de HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Em seguida, escreva este CSS para ele:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
O conteúdo acaba tendo 142 px de largura, em vez dos 100 px especificados, e sai do elemento. Por quê?
O modelo de caixa é uma base essencial do CSS. Entender como ele funciona, como é afetado por outros aspectos do CSS e, principalmente, como controlá-lo pode ajudar você a escrever um CSS mais previsível.
É importante lembrar que tudo o que é exibido pelo CSS é uma caixa, mesmo que seja apenas um texto ou tenha um border-radius que o faça parecer um círculo.
Conteúdo e dimensionamento
As caixas têm comportamentos diferentes com base no valor display, nas dimensões definidas e no conteúdo que contêm. Esse conteúdo pode ser texto simples ou mais caixas geradas por elementos filhos. De qualquer forma, o conteúdo afeta o tamanho da caixa por padrão.
Você pode controlar isso usando o dimensionamento extrínseco ou o dimensionamento intrínseco para permitir que o navegador tome decisões com base no tamanho do conteúdo.
Confira uma demonstração básica que explica a diferença:
A demonstração tem as palavras "CSS is awesome" em uma caixa com dimensões fixas e uma borda espessa. Como a caixa tem uma largura especificada, ela é dimensionada extrinsecamente.
Isso significa que ela controla o dimensionamento do conteúdo filho. No entanto, a palavra "awesome" é muito grande para a caixa, então ela transborda para fora da caixa de borda da caixa mãe (mais informações sobre isso adiante). Uma maneira de evitar esse overflow é permitir que a caixa seja dimensionada intrinsecamente, não definindo a largura ou, nesse caso, definindo a width como min-content. A palavra-chave min-content informa à caixa que ela deve ter apenas a largura mínima intrínseca do conteúdo (a palavra "awesome"). Isso permite que a caixa se ajuste perfeitamente ao texto.
Confira um exemplo mais complexo que mostra o impacto de diferentes dimensionamentos no conteúdo real:
Ative e desative o dimensionamento intrínseco para ver como o dimensionamento extrínseco oferece mais controle e o dimensionamento intrínseco oferece mais controle ao conteúdo. Para conferir os efeitos, adicione algumas frases de texto ao card. Quando esse elemento tem dimensionamento extrínseco, há um limite para a quantidade de conteúdo que pode ser adicionada antes que ele transborde, mas isso não acontece quando o dimensionamento intrínseco está ativado.
Por padrão, esse elemento tem uma width e height definidas de 400px cada.
Essas dimensões fornecem limites estritos para tudo dentro do elemento, que são respeitados, a menos que o conteúdo seja muito grande para a caixa. Para conferir isso na prática, mude a legenda abaixo da imagem da flor para algo que exceda a altura da caixa.
Termo principal: o overflow acontece quando o conteúdo é muito grande para a caixa em que está. É possível gerenciar como um elemento processa o conteúdo de overflow usando a propriedade overflow.
A mudança para o dimensionamento intrínseco permite que o navegador tome decisões com base no tamanho do conteúdo da caixa. Isso torna o overflow muito menos provável, porque a caixa é redimensionada com o conteúdo.
É importante lembrar que o dimensionamento intrínseco é o comportamento padrão do navegador e geralmente oferece muito mais flexibilidade do que o dimensionamento extrínseco.
As áreas do modelo de caixa
As caixas são compostas por áreas distintas do modelo de caixa que fazem um trabalho específico.
A caixa de conteúdo é a área em que o conteúdo reside. O conteúdo pode controlar o tamanho do pai, então essa geralmente é a área de tamanho mais variável.
A caixa de preenchimento envolve a caixa de conteúdo e é o espaço criado por
a propriedade padding.
Como o preenchimento está dentro da caixa, o plano de fundo dela fica visível no espaço criado.
Se a caixa tiver regras de overflow definidas, como overflow: auto ou overflow: scroll, as barras de rolagem também vão ocupar esse espaço.
A caixa de borda envolve a caixa de preenchimento, e o espaço dela é definido pelo
border valor, que
cria um frame visual para o elemento. A borda do elemento é o limite do que você pode ver.
A área final, a caixa de margem, é o espaço ao redor da caixa, definido pela
regra margin dela. Propriedades como
outline e
box-shadow
também ocupam esse espaço porque são pintadas na parte de cima do elemento e não
afetam o tamanho da caixa. Mudar a outline-width da caixa de 200px não muda nada dentro da borda.
Uma analogia útil
O modelo de caixa é complexo de entender. Por isso, confira uma analogia para o que você aprendeu até agora.
Neste diagrama, há três porta-retratos montados lado a lado em uma parede. Os elementos da imagem emoldurada correspondem ao modelo de caixa da seguinte maneira:
- A caixa de conteúdo é a obra de arte.
- A caixa de preenchimento é a placa de montagem branca, entre o frame e a obra de arte.
- A caixa de borda é o frame, que fornece uma borda literal para a obra de arte.
- A caixa de margem é o espaço entre os frames.
- A sombra ocupa o mesmo espaço que a caixa de margem.
Depurar o modelo de caixa
As ferramentas para desenvolvedores do navegador fornecem uma visualização dos cálculos do modelo de caixa de uma caixa selecionada, o que pode ajudar você a entender como o modelo de caixa funciona e como ele afeta o site em que você está trabalhando.
Para testar isso no Chrome:
- Abra as DevTools.
- Selecione um elemento.
- Mostre o depurador do modelo de caixa.
Controlar o modelo de caixa
Para entender como controlar o modelo de caixa, primeiro é preciso entender o que acontece no navegador.
Cada navegador aplica uma folha de estilo do user agent a documentos HTML. A folha de estilo define como os elementos devem aparecer e se comportar, caso eles não recebam CSS definido. O CSS nas folhas de estilo do user agent varia de navegador para navegador, mas todos têm padrões que facilitam a leitura do conteúdo.
A folha de estilo do user agent define o valor padrão para elementos que usam display. Por exemplo, o valor display padrão de um elemento <div> é
block, um <li> tem um valor display padrão de list-item e um <span>
tem um valor display padrão de inline.
Um elemento inline tem uma margem de bloco, mas outros elementos não a respeitam.
Com inline-block, outros elementos respeitam a margem de bloco, mas o primeiro
elemento mantém a maioria dos mesmos comportamentos que tinha como um inline elemento.
Um item block preenche o espaço inline disponível por padrão, enquanto os elementos
inline e inline-block são tão grandes quanto o conteúdo.
A folha de estilo do user agent também define padrões para box-sizing, que informa a uma caixa como calcular o tamanho. Por padrão, todos os elementos são definidos como box-sizing: content-box;. Isso significa que, quando você define dimensões como width e height, elas são aplicadas à caixa de conteúdo. Se você definir padding e border, esses valores serão adicionados ao tamanho da caixa de conteúdo.
Teste seu conhecimento
Teste seu conhecimento sobre as propriedades que afetam o tamanho do modelo de caixa.
.my-box { width: 200px; border: 10px solid; padding: 20px; }
Qual é a largura de .my-box?
200px estaria correto se a caixa tivesse box-sizing: border-box.
A largura real dessa caixa é de 260 px.
Como o CSS usa o box-sizing: content-box padrão, a largura aplicada é a largura do conteúdo, e padding e border em ambos os lados são adicionados a ela. 200 px para o conteúdo + 40 px de preenchimento + 20 px de borda fazem uma largura visível total de 260 px.
É possível mudar isso especificando o dimensionamento border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Esse modelo de caixa alternativo informa ao CSS para aplicar a width à caixa de borda em vez da caixa de conteúdo. Isso significa que nossa border e padding são
inseridas, então, quando você define .my-box como 200px de largura, ela é renderizada
como 200px de largura.
Confira como isso funciona na demonstração interativa a seguir. Quando você alterna o valor box-sizing, a área azul mostra qual CSS está sendo aplicado dentro da caixa.
*,
*::before,
*::after {
box-sizing: border-box;
}
Essa regra de CSS seleciona todos os elementos no documento e todos os pseudo-elementos ::before e ::after e aplica box-sizing: border-box.
Isso significa que todos os elementos agora usam esse modelo de caixa alternativo.
Como o modelo de caixa alternativo pode ser mais previsível, os desenvolvedores costumam adicionar essa regra a redefinições e normalizadores, como A (mais) Modern CSS Reset (link em inglês).