Implementação da Box Model

Não importa quais cores, imagens de fundo ou posição você adicionar em um elemento, ele sempre será tratado como uma caixa. Isto pode não ser perceptível à primeira vista, mas basta começar a usar um inspetor de elementos como o Firebug ou o console do WebKit e você irá se acostumar com esta abordagem.

O Box model é como as propriedades de CSS compõem as dimensões, onde além do width e do height, as propriedades border e padding também influenciam no resultado final, mas de uma forma um tanto quanto confusa. Considere o código a seguir:

.button {

border: 1px solid #999;

height: 26px;

padding: 5px 15px;

width: 90px;

}

Esta classe button, ao ser aplicada em um elemento qualquer, irá ocupar 122px de largura e 38px de altura na sua página. Isto acontece por que os valores de padding e border são somados a largura e altura definidas, fazendo com que as propriedades width e height sejam responsáveis por definir apenas a largura e a altura do seu conteúdo, e não do elemento como um todo. Além da confusão que pode ser gerada ao se calcular os tamanhos de antemão, isso torna bastante complicado o uso de valores com porcentagem nestas propriedades – um elemento com 100% de width e 2px de bordas ficará maior do que os 100% definidos.

Outro exemplo para ilustrar este problema: ambos elementos possuem o mesmo valor de width, mas o valor do padding do segundo o deixa com 300px de largura.

.box {

background-color: LimeGreen;

width: 250px;

}

 

.box-with-padding {

background-color: LightBlue;

padding: 0 25px;

width: 250px;

}

Esta regra do Box model aplica estes valores a apenas o conteúdo e não a utiliza como limites fixos do elemento como um todo, isso pode complicar diversos casos de diagramação de elementos em páginas complexas, mas é possível alterar este comportamento e não ficar recalculando larguras e alturas baseado em bordas e espaçamentos.

A propriedade box-sizing, uma das novidades do CSS 3, permite alterar esta regra de content-box para o valor border-box, que força o navegador a respeitar estes limites e ocupar o espaço interno do elemento com os valores de border e padding, no lugar de expandir o elemento.

* {

box-sizing: border-box;

}

 

.box {

background-color: LimeGreen;

width: 250px;

}

 

.box-with-padding {

background-color: LightBlue;

padding: 0 25px;

width: 250px;

}

Com isso, o box-sizing acaba tornando ambos elementos do mesmo tamanho.

3

Source: scriptcase / Implementação da Box Model

Comments

comments

Greg

Old school developer with a passion for food, bikes and a whole lot of weird things.

Leave a Reply

Your email address will not be published.