Box Model
Um conceito fundamental para entender CSS é o modelo de caixa (box model). Ele é tão importante que existe uma brincadeira clássica sobre ele. Reproduza o código abaixo em seu navegador.
<div class="box">CSS IS ASWOME</div>.box {
text-transform: uppercase;
font-size: 6rem;
font-weight: 700;
border: 5px solid #000;
padding: 2rem;
margin: 2rem 0 4rem;
width: 300px;
}
O resultado do seu código deverá ser similar a imagem mostrada anteriormente, mas porque? Aqui entra a importância de se compreender o conceito do modelo de caixa.
O conceito mais importante de se lembrar é que tudo o que é renderizado pelo CSS (mostrado na tela) é uma caixa. Não importa qual conteúdo, seja um parágrafo, um link ou imagem, tudo é representado pelo CSS como sendo uma caixa. Lembre-se da máxima: tudo é caixa e cada caixa possui quatro áreas: conteúdo, preenchimento, borda e margem.
- conteúdo: é a área onde o conteúdo é renderizado.
- preenchimento: é a área que envolve o conteúdo. Também pode ser referenciada pelo espaço entre o conteúdo e a borda.
- borda: é a área que define o limite da caixa. É um espaço que envolve a área de preenchimento.
- margem: é o espaço que envolve a borda. Pode ser referenciado como o espaço que entre o elemento com margem e os demais elementos renderizados na tela.
Perceba a imagem abaixo, nela você pode ver três quadros pendurados na parede. Essa imagem é uma ótima analogia ao modelo de caixa na qual cada quadro representa um elemento e por consequência é renderizado como uma caixa pelo CSS.
Agora perceba a imagem abaixo, nela você pode visualizar as áreas do modelo de caixa:
- conteúdo: a arte em si (foto);
- preenchimento: e a área branca entre a arte e a moldura;
- borda: a moldura da arte, representada pela parte com a cor preta;
- margem: o espaço entre os quadros;
Agora voltamos para o problema inicial apresentado. A demonstração tem a frase “CSS is awesome” em uma caixa na qual a largura - propriedade width - possui uma largura fixa 300px. Porém o texto dentro da caixa ocupa um espaço maior que os 300 pixels definidos para a caixa, logo o conteúdo extrapola o espaço reservado para ele.
Importante: Quando o conteúdo é muito grande para a caixa em que está, chamamos isso de overflow.
Essa definição específica da largura é chamada de dimensionamento extrínseco. Nele existe um limite de quanto conteúdo é possível adicionar antes que ultrapasse os limites da caixa. Para resolver esse problema podemos utilizar o dimensionamento intrínseco. Nesse dimensionamento você está deixando o navegador tomar as decisões baseados no tamanho do conteúdo inserido no elemento. É importante lembrar que este é o comportamento padrão realizado pelos navegadores. Embora o dimensionamento extrínseco proporcione mais controle na superfície, o dimensionamento intrínseco proporciona maior flexibilidade.
Para resolver o problema você poderia simplesmente omitir a declaração with que como visto anteriormente seria o comportamento padrão do navegador ou utilizar o valor min-content. A palavra-chave min-content diz à caixa para ter apenas a largura mínima intrínseca de seu conteúdo (a largura o texto).
Outro ponto importante é entender como o navegador interpreta a largura de um elemento. Por exemplo, observe o seguinte código CSS abaixo e responda a pergunta, qual a largura do elemento .box?
.box {
width:200px;
border: solid 10px purple;
padding: 10px;
}Você pode ficar tentando a falar 200px já que a propriedade with está definida com esse valor, porém na verdade a largura será de 240px. Esse é um comportamento esquisito e pouco intuitivo visto que quando pensamos no elemento como um todo esperamos que a largura do elemento considere também a sua borda e seu preenchimento.
Esse comportamento é o padrão dos navegadores então tome cuidado. Porém, graças ao CSS3, hoje é possível contornar esse comportamento com a propriedade box-sizing. Por padrão seu valor é content-box, mas podemos alterá-lo para border-box. Esse valor vai instruir ao navegador a considerar a largura como sendo a largura do conteúdo + sua borda + seu preenchimento.
No caso do exemplo acima, se aplicássemos a propriedade box-sizing: border-box ao elemento, teríamos uma largura total de 200px e não mais 240px. Como esse comportamento costuma ser mais previsível para o desenvolvimento, os desenvolvedores costumam adicionar essa regra a arquivos especiais conhecidos como “redefinidores” (resets) e normalizadores (normalizers).