Modelo de caixa

Digamos que você tenha esta parte de HTML:

<p>I am a paragraph of text that has a few words in it.</p>

Em seguida, você cria 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 dos 100 px que você especificou, e sai do seu elemento. Por quê?

O modelo de box é a base principal do CSS. Entender como o modelo de caixa funciona, como é afetado por outros aspectos do CSS e, o mais importante, como você pode controlá-lo, pode ajudar a escrever CSS mais previsíveis.

Entender o modelo de caixa do CSS ajudará você a descobrir por que seu o conteúdo não cabe dentro de um elemento.

É importante lembrar que tudo que é exibido pelo CSS é uma caixa, mesmo se for apenas um texto ou tiver uma border-radius que faz com que pareça um círculo.

Conteúdo e tamanho

As caixas têm um comportamento diferente com base no valor de display, no conjunto. e o conteúdo delas. 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 esse recurso usando o dimensionamento externo ou o 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:

Quando a caixa tem tamanho externo, há limite para a quantidade de conteúdo que você pode adicionar antes que ele estoure. Isso torna a palavra "incrível" estouro.

A demonstração tem as palavras "O CSS é incrível" em uma caixa com dimensões fixas e borda grossa. Como a caixa tem uma largura especificada, ela foi dimensionada de forma externa. Isso significa que ele controla o tamanho do conteúdo filho. No entanto, a palavra "incrível" é muito grande para o box, por isso ultrapassa o limite do box pai border box (falaremos sobre isso mais adiante). Uma forma de evitar esse estouro é permitir a caixa ser intrinsecamente dimensionada por não definir a largura ou, nesse caso, definindo width como min-content. A palavra-chave min-content instrui a caixa a ter a mesma largura que a largura mínima intrínseca do conteúdo (a palavra "incrível"). Isso permite que a caixa se encaixe perfeitamente ao redor do texto.

Aqui está um exemplo mais complexo que mostra o impacto de diferentes tamanhos em conteúdo:

O dimensionamento extrínseco permite controlar o tamanho um elemento. O dimensionamento intrínseco evita o excesso de texto.

Ative e desative o dimensionamento intrínseco para conferir os benefícios do dimensionamento externo com o dimensionamento extrínseco e intrínseco dão ao conteúdo mais controle Para conferir os efeitos, adicione algumas frases de texto ao card. Quando esse elemento tem tamanho externo, há um limite na quantidade de conteúdo que você que podem ser adicionados antes do estouro, mas isso não acontece quando o dimensionamento intrínseco é ativada.

Por padrão, esse elemento tem um conjunto width e height de 400px cada. Essas dimensões fornecem limites rígidos para tudo dentro do elemento, que são a menos que o conteúdo seja grande demais para a caixa. Você pode ver isso em ação mudando a legenda abaixo da imagem da flor para algo que exceda o altura da caixa.

Termo-chave: o estouro acontece quando o conteúdo é grande demais para a caixa em que está. Você pode gerenciar a forma como um elemento processa conteúdo flutuante usando a propriedade overflow.

Mudar para o dimensionamento intrínseco permite que o navegador tome decisões por você com base no o tamanho do conteúdo da caixa. Isso diminui muito a probabilidade de estouro, porque a caixa é redimensionado com seu conteúdo.

É importante lembrar que o dimensionamento intrínseco é o padrão do navegador e, geralmente, fornece muito mais flexibilidade do que o dimensionamento extrínseco.

As áreas do modelo de box

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

Um diagrama mostrando as quatro áreas principais do modelo de box: caixa de conteúdo, caixa de padding, caixa de borda e caixa de margem
As quatro áreas principais do modelo de box: caixa de conteúdo, caixa de padding, caixa de borda e caixa de margem.

A caixa de conteúdo é a área em que o conteúdo reside. O conteúdo pode controlam o tamanho do pai, de modo que essa geralmente é a área com o tamanho mais variado.

A caixa de preenchimento envolve a caixa de conteúdo e é o espaço criado pela a propriedade padding. Como o padding fica dentro da caixa, o plano de fundo dela fica visível no espaço que ele cria. Se a caixa tiver regras de estouro definidas, como overflow: auto ou overflow: scroll, as barras de rolagem também ocupam esse espaço.

As barras de rolagem ficam na caixa de padding.

A caixa de borda envolve a caixa de preenchimento, e o espaço dela é definido pelo border, que cria um frame visual para o elemento. A borda do elemento é a do que pode ser visualizado.

A área final, a caixa de margem, é o espaço ao redor da caixa, definida pelo regra margin do box. Propriedades como outline e box-shadow também ocupam esse espaço porque são pintados sobre o elemento e não afetar o tamanho da caixa. Alterando a configuração outline-width de 200px da caixa em uma caixa não muda nada dentro da borda.

Um contorno amplo não afeta o tamanho do restante do elemento
.

Uma analogia útil

O modelo de box é complexo de entender, então aqui está uma analogia com o que aprendeu até agora.

Três porta-retratos.
O modelo de caixas ilustrados usando porta-retratos físicos.

Neste diagrama, há três porta-retratos montadas 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 padding é 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 da 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 navegador DevTools fornece uma visualização do modelo de box de um box selecionado cálculos, que podem ajudar a entender como o modelo de caixa funciona e como ele afeta o site em que você está trabalhando.

Tente fazer o seguinte no seu navegador:

  1. Abra o DevTools.
  2. Selecione um elemento.
  3. Mostrar o depurador de modelos de caixa.
.
O depurador de modelos de caixa para a demonstração do Outline.

Controlar o modelo de box

Para entender como controlar o modelo de caixa, primeiro é preciso entender o que acontece no navegador.

Todo navegador aplica uma folha de estilo user agent aos documentos HTML que define qual deve ser a aparência e o comportamento dos elementos se o CSS não tiver sido definido. O CSS no as folhas de estilo do user agent variam de acordo com o navegador, mas elas oferecem padrão 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. Para 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 mantém a maioria dos comportamentos que tinha como 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 mesmo tamanho que o próprio conteúdo.

A folha de estilo do user agent também define box-sizing, que informa à caixa como calcular o tamanho da caixa. Por padrão, todos os elementos têm o user agent a seguir estilo: box-sizing: content-box;. Isso significa que, quando você define dimensões como como width e height, essas dimensões se aplicam à caixa de conteúdo. Se você e definir padding e border, esses valores serão adicionados à propriedade tamanho.

Teste seu conhecimento

Teste seu conhecimento sobre o impacto do tamanho do modelo de caixa nas propriedades.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

Qual vai ser a largura de .my-box?

200px
260px

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 isso. 200 px para o conteúdo + 40 px de preenchimento + 20 px de borda formam o total largura visível de 260 px.

Você pode 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 instrui o CSS a aplicar a width à caixa de borda. em vez da caixa de conteúdo. Isso significa que border e padding recebem enviado, ou seja, quando você define .my-box como 200px de largura, ele é renderizado com 200px de largura.

Confira como isso funciona na demonstração interativa a seguir. Quando você alternar o box-sizing, a área azul mostra qual CSS está sendo aplicado dentro do caixa

Compare os efeitos do dimensionamento da caixa de conteúdo e da caixa de borda
.
*,
*::before,
*::after {
  box-sizing: border-box;
}

Esta regra CSS seleciona todos os elementos do documento e cada pseudoelemento ::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 box alternativo pode ser mais previsível, os desenvolvedores costumam adicionar a redefinições e normalizadores, como este.

Recursos

Folhas de estilo do user agent