Box Model CSS – Entenda como funciona

Quando criamos alguma estilização em elementos via CSS, é comum ao definir uma largura (width) adicionar outras propriedades. Ao ser renderizado pelo navegador, ele possui um tamanho maior do que você definiu, ou espaço por ela ocupado ficou maior que você calculou.

Isso acontece porque a largura ocupada por esse elemento é composta em 4 partes: conteúdo, espaçamento, borda e margem.

1. Conteúdo;
2. Espaçamento (Padding);
3. Borda (Border);
4. Margem (Margin).

O espaço ocupado por esse elemento irá levar em conta esses 4 itens na hora realizar o cálculo do seu tamanho e posição na hora da renderização da  página.

Vamos criar um elemento e definir uma largura, altura,  borda e um espaçamento. Criaremos primeiro o elemento HTML:

<div class="box"></div>

Criamos uma div, com uma classe chamada “box”. Agora iremos adicionar um código CSS:

.box{
    width:200px; 
    height:100px;
    border:5px solid #ccc;
    padding:10px; 
    background:#3ab87a;							
}

Foi definido uma largura de 200px, altura de 100px, uma borda com espessura de 5px para os lados (topo, base, direito e esquerdo), com estilo sólido, uma cor e uma espaçamento de 10px para o topo, base, direito e esquerdo, além de uma cor de fundo para o elemento.

Te pergunto: Qual o tamanho desse box?

Automaticamente, como foi definido a largura e altura, você responderia “as dimensões que foram configuradas”.

Só que na verdade esse box é renderizado com uma largura de 230px e altura de 130px. Como assim?

Veja  pelo inspetor de elementos do Chrome, selecionando a div que foi criada:

Vamos calcular agora para chegarmos a esses valores, começando pela largura:

Largura (width) : 200px
Borda (border) : 5px para lado direito + 5px para o lado esquerdo = 10px
Espaçamento (padding): 10px para o lado direito + 10px para o lado esquerdo = 20px
O valor final : 200px + 10px + 20px  = 230px

Agora vamos ver a altura:

Altura(height) : 100px
Borda (border): 5px para lado superior + 5px para o lado inferior = 10px
Espaçamento (padding): 10px para o lado superior + 10px para o lado inferior = 20px
O valor final: 100px + 10px + 20px = 130px

Veja que o navegador levou em conta tanto os espaçamentos quanto a borda para calcular o tamanho do elemento a ser renderizado na página.

Para ver cada item sendo aplicado, utilize o Chrome, clicar com botão direito em cima do elemento, e vá em inspecionar elemento. Do lado direito, clique na aba “Computed”.

Você consegue visualizar o tamanho do elemento, e cada valor de propriedade sendo aplicada.

Como podemos resolver isso com CSS3?

O CSS3 trouxe uma propriedade chamada box-sizing, o qual é possível alterar o comportamento do Box Model. Por padrão, o valor definido é content-box, as propriedades width e height são calculadas incluindo só o conteúdo quando adicionamos as propriedades de border e padding.  Ele não leva em conta na hora de realizar o cálculo e acrescenta nas dimensões do elemento.

Vamos utilizar outro valor que é border-box, onde ele vai levar em conta os valores definidos pelo padding e por border na hora de renderizar.

O cálculo para definir as dimensões do elemento será levando em conta para que o elemento tenha dimensão definida pelo width e height.

.box{
    width:200px;
    height:100px;
    border:5px solid #ccc;
    padding:10px;
    background:#3ab87a;			
    box-sizing: border-box;
}

Veja como aparece no inspetor de elementos do navegador:

Veja que agora, ao inspecionar o elemento, ele está com  largura de 200px e altura de 100px, da mesma forma que foi definido pelo width e height. Vamos ver agora como está sendo realizado o cálculo, indo pelo inspetor de elementos, na aba “Computed”.

Veja que agora, o espaço reservado ao conteúdo está com uma largura de 170px  e uma altura de 70px , porque foi incluído tanto o border e padding na hora de realizar o cálculo das dimensões.

Utilizando assim a propriedadebox-sizing, você consegue modificar o comportamento padrão do Box Model, sem ser surpreendido na hora de posicionar seus elementos no seu layout.

E aí, gostou? Já conhecia o conceito de Box Model?

Deixe seu comentário.

Um abraço!