Site Overlay

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

Leave a Reply

Your email address will not be published.