Podcast do CSS - 001: o modelo da caixa
Digamos que você tenha este código HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Em seguida, crie este CSS para ele:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
O conteúdo termina com 142 px de largura, em vez do 100 px especificado, e se destaca do seu elemento. Por quê?
O modelo de caixa é a base do CSS. Entender como o modelo de caixa funciona, como ele é afetado por outros aspectos do CSS e, principalmente, como controlá-lo pode ajudar a escrever CSS mais previsível.
É importante lembrar que tudo mostrado pelo CSS é uma caixa, mesmo que seja apenas texto, ou tenha um border-radius que faça parecer um círculo.
Conteúdo e tamanho
As caixas têm um comportamento diferente com base no valor de display, nas dimensões
definidas e no conteúdo que elas 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.
É possível controlar isso usando o dimensionamento externo ou o dimensionamento intrínseco para permitir que o navegador tome decisões por você com base no tamanho do conteúdo.
Esta é uma demonstração básica que explica a diferença:
A demonstração tem as palavras "O CSS é incrível" em uma caixa com dimensões fixas e uma borda grossa. Como a caixa tem uma largura especificada, ela tem um tamanho extremo.
Isso significa que ele controla o dimensionamento do conteúdo filho. No entanto, a palavra "awesome" é muito grande para a caixa. Por isso, ela ultrapassa a caixa borda da caixa pai (mais sobre isso posteriormente). Uma maneira de evitar esse estouro é deixar
a caixa dimensionada intrinsecamente sem definir a largura ou, nesse caso,
definindo width como min-content. A palavra-chave min-content instrui a caixa a
ter apenas a largura mínima intrínseca do conteúdo dela (a palavra
"incrível"). Isso permite que a caixa se encaixe perfeitamente ao redor do texto.
Confira um exemplo mais complexo que mostra o impacto de diferentes tamanhos no conteúdo real:
Ative e desative o dimensionamento intrínseco para conferir como o dimensionamento externo oferece mais controle com o dimensionamento externo e o intrínseco, proporcionando mais controle ao conteúdo. Para ver os efeitos, adicione algumas frases de texto ao card. Quando esse elemento tem dimensionamento externo, há um limite para a quantidade de conteúdo que pode ser adicionado antes do transbordamento, mas isso não acontece quando o dimensionamento intrínseco é ativado.
Por padrão, esse elemento tem um width definido e um height de 400px cada.
Essas dimensões definem limites estritos para tudo dentro do elemento, que são
respeitados, a menos que o conteúdo seja muito grande para a caixa. Confira como isso funciona
mudando a legenda abaixo da imagem da flor para algo que exceda a
altura da caixa.
Termo importante: o estouro acontece quando o conteúdo é muito grande para a caixa em que está. É possível
gerenciar como um elemento processa o conteúdo flutuante usando a propriedade overflow.
A mudança para o dimensionamento intrínseco permite que o navegador tome decisões por você com base no tamanho do conteúdo da caixa. Isso diminui muito o overflow, porque a caixa é redimensionada com o conteúdo.
O dimensionamento intrínseco é o comportamento padrão do navegador e geralmente oferece muito mais flexibilidade do que o dimensionamento externo.
As áreas do modelo de box
Os box são compostos de áreas distintas de modelo de box que fazem um trabalho específico.
A caixa de conteúdo é a área em que o conteúdo se encontra. O conteúdo pode controlar o tamanho do elemento pai. Essa geralmente é a área de tamanho mais variado.
A caixa de padding envolve a caixa de conteúdo e é o espaço criado pela
propriedade padding.
Como o padding está dentro da caixa, o plano de fundo dela fica visível no espaço
criado.
Se a caixa tiver regras de estouro definidas, como overflow: auto ou
overflow: scroll, as barras de rolagem também vão ocupar esse espaço.
A caixa de borda circunda a caixa de padding, e o espaço dela é definido pelo valor
border, que
cria um frame visual para o elemento. A borda do elemento é o limite do que é possível ver.
A área final, a caixa de margem, é o espaço ao redor da caixa, definido pela
regra margin. Propriedades como
outline e
box-shadow
também ocupam esse espaço porque são pintadas sobre o elemento e não
afetam o tamanho da caixa. Mudar a outline-width de 200px da caixa em
uma caixa não muda nada dentro da borda.
Uma analogia útil
O modelo de caixa é complexo de entender, então aqui está uma analogia com 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 arte.
- A caixa de enchimento é a placa de suporte branca, entre a moldura e a arte.
- A caixa de borda é o frame, fornecendo uma borda literal para a 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
O Browser DevTools fornece uma visualização dos cálculos de modelo de caixa de uma caixa selecionada, o que pode ajudar você a entender como o modelo de caixa funciona e como afeta o site em que você está trabalhando.
Tente fazer isso no seu navegador:
- Abra o DevTools.
- Selecione um elemento.
- Mostra o depurador do modelo de caixa.
Controlar o modelo de caixa
Para entender como controlar o modelo de caixa, primeiro você precisa entender o que acontece no navegador.
Em cada navegador, uma folha de estilo do user agent é aplicada aos documentos HTML. Ela define a aparência e o comportamento dos elementos se não houver um CSS definido. O CSS nas folhas de estilo do user agent varia de acordo com o navegador, mas fornece padrões razoáveis para facilitar a leitura do conteúdo.
Uma propriedade que a folha de estilos do user agent define o display padrão de uma caixa. Por
exemplo, em um fluxo normal, 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 do bloco, mas o primeiro
elemento mantém a maioria dos mesmos comportamentos de um elemento inline.
Um item block preenche o espaço inline disponível por padrão, enquanto
os elementos inline e inline-block têm o tamanho do conteúdo.
A folha de estilo do user agent também define box-sizing, que informa a uma caixa como calcular o tamanho dela. Por padrão, todos os elementos têm o seguinte estilo de user agent: 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 seus conhecimentos sobre o impacto do tamanho do modelo de caixa.
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
Qual será a largura do dispositivo .my-box?
200px estaria correto se a
caixa tivesse box-sizing: border-box.
A largura real desta 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 isso. 200 px para o conteúdo + 40 px de padding + 20 px de borda resulta em uma largura visível
total de 260 px.
É possível mudar isso especificando o dimensionamento da border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Esse modelo de caixa alternativo instrui o CSS a aplicar width à caixa de borda
em vez da caixa de conteúdo. Isso significa que border e padding são enviados, então quando você define .my-box como 200px de largura, ele é renderizado em 200px de largura.
Confira como isso funciona na demonstração interativa a seguir. Quando você alterna o valor de box-sizing, a área azul mostra qual CSS está sendo aplicado dentro da caixa.
*,
*::before,
*::after {
box-sizing: border-box;
}
Essa regra CSS seleciona todos os elementos no documento
e todos os pseudoelementos ::before e ::after e aplica box-sizing: border-box.
Isso significa que cada elemento agora usa esse modelo de caixa alternativo.
Como o modelo de caixa alternativo pode ser mais previsível, os desenvolvedores geralmente adicionam essa regra a redefinições e normalizadores, como este.