CSS Box Model
Postado por: Pedro Rogério emEntender como funciona o Box Model é essencial para aqueles que querem migrar das tabelas e começar o desenvolvimento de layouts utilizando CSS. É essencial entender como o browser renderiza os elementos HTML para não passar por problemas com Float. Os elementos na página são renderizados como retângulos, então, todas as tags HTML funcionam como caixas, e essas caixas são formadas por 4 áreas retângulares que são as seguintes:
- Conteúdo
- Espaçamentos (padding)
- Bordas (border)
- Margens (margin)
Imagem Ilustrativa do Box Model
Diagrama em 3D do Box Model gentilmente cedida pelo site hicksdesign.
O que muita gente não sabe quando está iniciando é que o padding é somado a largura total do elemento, ou seja, se temos uma div com uma largura fixa de 300px, e definimos um padding de 10px, ao invés de 300px agora essa div passará a ter 320px de largura, ganhamos 10px de cada lado. É muito importante lembrar-se disso, o padding é somado a largura total. Com margin ocorre a mesma coisa, se definirmos 20px de margin para nossa div, de 320px ela passará a ter 360px. E não se esqueçam de que isso também ocorre com as bordas, se definirmos 2 pixels de borda, a largura agora passará a ser 364px de largura total em nossa div
Características das áreas do box
As margens são sempre transparentes e cada browser tem uma margem default que é definida pelo próprio browser, embora as especificações CSS definam uma margem default(0) para cada elemento HTML, cada fabricante de browser adota um valor default para a margem. As bordas são sempre transparentes e seu valor default é igual a 0. O padding é transparente e seu valor default também é igual a 0. O background(fundo) está sempre por trás do conteúdo e do espaçamento.
Para corrigir esses comportamentos por default do browser, é aconselhável você iniciar seu CSS com um seletor universal (*) zerando todos as margens e paddings dos elementos HTML.
* {margin:0; padding:0}
Utilizando o seletor universal (*) em conjunto com margin:0 e padding:0 você quer dizer que todo elemento HTML irá iniciar com o valor padrão de margin e padding iguais a 0.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
mto bom jovem! parabéns XD
Eu sempre inicio meu código também com border:0; Principalmente por causa das imagens que possuem links!
ótimo POST, Pedro!
Nem lembro quanto tempo demorei para aprender que um width + padding zoavam o layout rsrs…
Parabéns. Ótimo texto, simples, de fácil entendimento e de grande utilidade. Esperamos mais textos com essa qualidade. Até mais !! Valeu !
Parabéns Pedro. Muito bom sem post. É sempre bom divulgar boas informações. Continue assim.
Valeu.
Ótimo post, é muito importante estar com essas informações em mente na hora de montar o seu tableless.
Vale mencionar também que o ie6 se comporta diferente com os paddings e borders ele não soma esses valores ao tamanho do seu box, o que causa bastante problema e consequentemente temos que usar algum hack para contornar essa situação.
Abraços,
Eu utilizava o reset via * (universal), mas depois de ler e pesquisar, vi que o mais aconselhavél (e util) é usar o reset criado por Eric Meyer, que pode ser conferido no link http://meyerweb.com/eric/tools/css/ uma vez que ele reseta as tag realmente, e vi que os problemas de renderização entre browsers diminiu bastante.
Fica a dica, abraços!
Muito bom, eu tbm apanhei muitooo para descobrir isso, não entendia de forma alguma o que acontecia, chegava a usar a calculadora para somar as medias e o layout ficava todo atrapalhado hehehe. Mais foi bom passar por isso, é assim que se aprende.
t+
Olá, tudo bom? acabei de conhecer este site e fiquei muito feliz em constatar que existem pessoas como você dispostas a contribuir com quem está começando. PARABENS e continue assim que com certeza a vida lhe pagaráo BEM com o BEM.
OBRIGADO, ABRAÇOX E SUCESSOS.
olá Parabens pelo blog, maravilhoso, estive fazendo uns teste a impressão que dá que quando coloca padding 10px, cresce para direita e altura , quando vc disse “ganhamos 10px de cada lado.” seria 10 px de rigth e left? da div?!
obrigado !!