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.