Como um desenvolvedor front-end, entender o modelo de caixa CSS é o sucesso ou o fracasso para ser capaz de fornecer layouts perfeitos em pixels. Vamos nos aprofundar e discutir como os elementos inline e de bloco se comportam de maneira diferente no contexto dos dois tipos de modelo de caixa – caixa de conteúdo e caixa de borda.

O básico: o que vem na caixa?

Antes de entrarmos em detalhes, vale a pena recapitular o que é o modelo da caixa. Cada elemento da sua página é uma caixa (sim, mesmo aqueles que não parecem ter um formato quadrado). As caixas podem estar dentro, contendo e/ou ao lado de outras caixas.

O modelo de caixa se aplica a todos eles e consiste em:

• Caixa de conteúdo: Um elemento HTML ou pseudoelemento CSS no qual reside seu conteúdo real - texto, imagens, o que quer que seja.
• Preenchimento: O espaço entre o seu conteúdo e a borda.
• Borda: A linha que envolve o preenchimento e o conteúdo.
• Margem: O espaço fora da borda que afasta outros elementos.

Portanto, quase todos os elementos HTML dentro e incluindo o

, e todos os pseudoelementos CSS, são uma caixa. As "paredes" dessa caixa são sua borda e podem receber uma espessura (ou largura. Entre esse conteúdo e as paredes dessa caixa você tem preenchimento. Entre essas paredes e outras caixas, você tem margem.

Principais diferenças entre elementos embutidos e de bloco

É crucial entender as principais diferenças em como o modelo de caixa impacta os elementos inline versus os elementos de bloco:

1. Largura: Os elementos do bloco se expandem para preencher seu contêiner por padrão. Elementos embutidos? Eles ocupam espaço suficiente para seu conteúdo.

2. Altura: Para elementos de bloco, preenchimento, borda e margem aumentarão a altura. Os elementos embutidos permanecem dentro da altura da linha, independentemente do preenchimento vertical ou das bordas.

3. Impacto do layout: Os elementos do bloco influenciam o layout horizontal e vertical. Os elementos inline tratam do fluxo horizontal, com impacto mínimo no espaçamento vertical.

4. Recolhimento de margem: O recolhimento de margem é um comportamento específico para elementos de bloco, onde margens verticais adjacentes podem se fundir (portanto, um margin-bottom:20px em um elemento pode ser recolhido em um margin-top: 20px em um elemento seguinte, criando uma margem de 20px). Elementos embutidos não funcionam neste jogo.

Agora que conhecemos os componentes do modelo de caixa e a diferença entre elementos inline e de bloco, vamos ver como as caixas de conteúdo são afetadas pela propriedade box-sizing, dependendo se são um elemento inline ou de bloco.

Dimensionamento de caixa: caixa de conteúdo vs. caixa de borda

A propriedade box-sizing controla como a largura e a altura de um elemento são calculadas e pode impactar significativamente o layout.

1. caixa de conteúdo com elementos embutidos

Quando box-sizing: content-box é aplicado a um elemento inline:

• Largura e Altura: A largura é determinada exclusivamente pelo conteúdo. Preenchimento, borda e margem são adicionados acima dessa largura.
• Impacto do layout: Como os elementos embutidos não interrompem o fluxo do texto, a largura do elemento é tão larga quanto o conteúdo. O preenchimento vertical e as bordas estão visualmente presentes, mas não afetam a altura da linha circundante.

2. caixa de conteúdo com elementos de bloco

Quando box-sizing: content-box é aplicado a um elemento de bloco:

• Largura e Altura: A largura ou altura especificada se aplica somente à área de conteúdo. O preenchimento e a borda são adicionados fora disso, aumentando o tamanho geral do elemento.
• Impacto no layout: Os elementos do bloco se expandem até a largura total do contêiner por padrão, a menos que especificado de outra forma. O preenchimento e as bordas aumentam o tamanho do elemento, afastando ainda mais os elementos adjacentes.

3. caixa de borda com elementos embutidos

Quando box-sizing: border-box é aplicado a um elemento embutido:

• Largura e Altura: A largura inclui o conteúdo, preenchimento e borda. A área de conteúdo diminui para acomodar preenchimento e bordas dentro da largura especificada.
• Impacto do layout: A largura do elemento ainda é determinada pelo conteúdo, mas agora o preenchimento e as bordas estão incluídos nesta largura. O preenchimento vertical e as bordas permanecem visualmente presentes, mas não alteram a altura da linha.

4. caixa de borda com elementos de bloco

Quando box-sizing: border-box é aplicado a um elemento de bloco:

• Largura e altura: A largura e a altura especificadas incluem o conteúdo, o preenchimento e a borda. Isso significa que o tamanho total do elemento permanece consistente com as dimensões especificadas, não importa quanto preenchimento ou borda você adicione.
• Impacto do layout: O tamanho do elemento de bloco é mais previsível porque o preenchimento e a borda estão contidos na largura especificada. Isso torna o design do layout mais fácil de gerenciar, especialmente ao alinhar elementos lado a lado.

Vale ressaltar que, embora content-box seja o padrão, border-box é amplamente considerado mais intuitivo e fornece o maior grau de controle.

---

O modelo de caixa CSS não é apenas um conceito poderoso - é uma ferramenta fundamental em seu arsenal de desenvolvimento de front-end. Ao compreender como o dimensionamento da caixa afeta os elementos embutidos e de bloco de maneira diferente, você pode começar a criar layouts perfeitos, nítidos e funcionais, sem o incômodo de solucionar problemas de layouts que se comportam mal.

Se você gostou deste download no Box Model, passe o mouse sobre a caixa em formato de coração no canto superior esquerdo e mostre todo o seu amor a este post!