Por que usar 'border-box' na estilização da sua página

[DATSIK 0]

Bom pessoal, minha primeira contribuição para o fórum.

Gostaria de explicar porque é bom sempre usar a propriedade border-box no momento de estilizar sua página html.

 

Todos os elementos no html é uma caixa, você controla o tamanho vertical com o height, o tamanho horizontal com o width, as margens internas e externas com o margin e padding, entre outras coisas.

O box model define como essas propriedades em conjunto vão montar um elemento e determinar o seu tamanho final.

 

Na documentação, a regra diz que a propriedade width trata do tamanho do conteúdo do elemento, não considerando seu padding e border (o mesmo vale para a altura).

Isto é, se você criar uma div querendo que ela ocupe metade da página com uma borda: width: 50%; border: 10px solid #ccc, o resultado não será o que você espera, pois o elemento terá mais 20px (10px de cada lado) mais o tamanho do componente pai (sua div).

 

Um exemplo no JSFiddle:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Note que ambas as divs tem 50% de largura, o que difere é que uma delas tem uma borda. Mas veja como o tamanho fica na página.

 

Quando você pensa em uma caixa normalmente pensa no tamanho dela junto com o tamanho da borda. Uma caixa termina em sua borda e isso deveria ser considerado o seu tamanho.

 

É possível mudar o box model dos elementos usando a propriedade "box-sizing": box-sizing: border-box

Isso diz que todos os elementos terão seu tamanho definido junto com a borda e o padding (vertical ou horizontal). Seria basicamente isto:

 

Então, antes mesmo de começar a estilizar os elementos, crie um seletor universal e coloque o box-sizing: border-box nele, assim:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

O seletor universal não pega pseudo elementos, então uma boa é colocar assim:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Atribuia a essas três propriedades, cada navegador renderiza de uma forma. Assim você evita problemas futuros.

 

Veja o mesmo exemplo, só que agora usando a propriedade box-sizing:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Ambos os elementos tem 100px de altura e 50% de largura, independente da sua borda ou margem interna.

 

Espero que gostem.

[I~Johnnie 22]

É, eu gosto de HTML (Abordando todo seu conceito) por causa do CSS, as possibilidades são quase infinitas, é muita coisa. Sou meio leigo nisso porém nem tanto, obrigado por compartilhar conosco.

~Abraços

[rnxn 2]

A Mozilla já se adequou aos padrões da W3c, não é preciso usar o seletor para navegadores firefox (incluindo o do sistema Android).

Para o chrome (e em outros navegadores) ainda é necessário.

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

NAVEGADORES QUE SUPORTAM:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

OBS: Já se passaram 30 dias, mas o tópico estava na primeira página (sendo o primeiro da lista). E acho que meu comentário contribui para o assunto.