Box Model, é um dos principais conceitos utilizado na construção do layout das páginas e a maioria das pessoas que começam a trabalhar com css, sabe pouco sobre o modelo de caixa ou box model. Na página da w3Schools existe uma sessão falando especificamente de box model demonstrando como ele é importante no desenvolvimento com css.
O box model determina a maneira como os elementos são exibidos e em certa medida como eles interagem entre si. Existem elementos inline, por exemplo: "spam", "em", (que dão ênfase a um trecho de texto do html) e elementos em bloco que dão uma quebra de linha, tanto acima quanto abaixo dele. Exemplo:
Ou seja o box model está presente em cada um desses elementos, sejam inline, ou em bloco. Ele é composto de preenchimento, borda, margem, posição. Dentro do box model, vai o conteúdo que tem uma largura e uma altura. Os atributos width e height são aplicados dentro do box model. Logo após o conteúdo, entre ele e a borda, está o padding, espaçamento, e é ali o preenhimento entre o conteúdo e a borda. Tem também o atributo borda (pode-se fazer bordas de vários tipos, tracejadas, preenchidas, coloridas, com imagens. E logo após a borda, fica a margem, que define os limites entre um box model e outro.
Para fins de estudar o box model, será conveniente instalar no browser, firefox, (um plugin, o firebug, ferramenta para facilitar a visualização do box model de cada um dos elementos. Ir em ferramentas, opção complementos, escreva firebug. Pesquisar por firebug. Instalar o firebug no firefox. (Clicar em adicionar ao firefox). O internet explorer tem uma ferramenta similar. Essa é uma ferramenta que auxilia muito aos programadores de interface. Na verdade um programador profissional sempre terá um tipo de ferramenta como esta. Clicar em reiniciar o firefox, para ele aplicar o firebug. Clicar no botão vermelho -abrir Firebug em Nova janela- no canto direito da barra de menus. Para acessar clicar em F12.
Na folha de estilo ficaria assim:
p{
margin-top: 1px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 20px;
}
Procurar memorizar a ordem desses lados: topo, direito, a parte de baixo e a esquerda, porque nesta ordem pode ser feita uma declaração abreviada, dessa forma:
Forma reduzida com quatro valores:
p{
margin: 1px 50px 50px 20px;
}
Forma reduzida com três valores:
p{
margin: 50px 20px 30px;*/
}
/* Forma reduzida com dois valores:
p{
margin: 50px 20px;*/
}
Forma reduzida com um valor: O browser vai entender que
é para aplicar em todos os lados do box model.
p{
margin: 50px;
}
O atributo padding pode ser declarado da mesma forma:
margin: 1px 50px 50px 20px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
Ou desta forma:
Forma reduzida com um valor:
p{
margin: 50px 20px 30px;
padding:50px;
}
O atributo border, também pode ser declarado da mesma forma que margin e padding:
p{
margin: 50px 20px 30px;
padding:50px;
border-top-width:5px;
border-color: red;
Ou assim:
p{
margin: 50px 20px 30px;
padding:50px;
border-width:2px 3px 4px 1px;
border-color: red yellow black cyan;
}
(Lembre-se de memorizar a ordem desses lados: topo, direito,
a parte de baixo e a esquerda, porque nesta ordem pode ser feita uma declaração abreviada.
p{
border-width:2px 3px 4px 1px;
border-color: blueb yellow black cyan;
border-style: ridge; /*borda com relevo*/
border-style: dotted; /*borda pontilhada*/
border-style: solid; /*borda sólida*/
border-style: dashed; /*borda traçejada*/
border-style: double; /*borda dupla*/
border-style: inset; /*borda mais clara nas laterais*/
border-style: outset; /*borda mais clara em cima laterais*/
}