Todos os elementos HTML podem ser considerados como caixas. Em CSS, o “Box model” é usado quando se fala em design e layout.
O CSS Box model é essencialmente uma caixa que envolve elementos HTML, e consiste em: margins, borders, padding, e o conteúdo real.
O box model nos permite colocar uma borda em torno de elementos e “espaços” em relação a outros elementos.
A imagem abaixo ilustra o box model:
Explicação das diferentes partes:
- Margin - Limpa uma área em torno da fronteira. A margem não tem uma cor de fundo, é completamente transparente
- Border - A fronteira que vai em torno do preenchimento e conteúdo. A fronteira é afetado pela cor de fundo da caixa
- Padding - Limpa uma área em torno do conteúdo. O preenchimento é afetado pela cor de fundo da caixa
- Conteúdo - O conteúdo da caixa, onde o texto e as imagens aparecem
A fim de definir a largura e altura de um elemento corretamente em todos os navegadores, você precisa saber como funciona o box model.
Largura e altura de um elemento
Importante: Quando você definir a largura e altura de um elemento com CSS, você apenas define a largura e a altura da área de conteúdo. Para calcular o tamanho total de um elemento, você também deve adicionar o padding, border e margin.
A largura total do elemento no exemplo abaixo é 300px:
width:250px; padding:10px; border:5px solid gray; margin:10px;
Vamos fazer as contas:
250px (largura)
+ 20px (padding esquerdo e direito)
+ 10px (margem esquerda e direita)
+ 20px (margem esquerda e direita)
= 300px
A largura total de um elemento deve ser calculado assim:
Width = width + left padding + right padding + left border + right border + left margin + right margin
A altura total de um elemento deve ser calculado assim:
Height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Compatibilidade de Browsers
O exemplo acima não é exibido corretamente em versões do IE8 e anteriores.
IE8 e versões anteriores incluem o preenchimento e borda na largura, se um DOCTYPE não está declarado.
Para corrigir esse problema, basta adicionar um DOCTYPE para a página HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
Agora tente você mesmo e boa sorte.
