O box model (modelo de caixa) é a representação de um elemento retangular em uma página web.
Quando falamos em retângulo sabemos que ele tem duas propriedades: altura e largura, certo? Mas no caso do box model existem outras propriedades que veremos aqui.
Observe a figura abaixo:
Desta forma podemos resumir que para obter o tamanho do box model devemos considerar o tamanho do box(altura e largura) + espaçamento interno + borda + margem.
No exemplo da figura acima temos como largura:
Para chegar a este cálculo consideramos os 20 px da margin direita e esquerda, os 2 px da borda direita e esquerda, os 30 px do espaçamento direito e esquerdo e mais 200 px da largura do box model.
O calculo da altura é similar: altura + espaçamento interno + borda + margem.
O box model pode ser aplicado em diversas tags do HTML, mas as mais usadas são <div>, <img>, <p>, <h1> a <h6> e em tags de tabelas como <table>,<th> e <td>.
Exemplos:
No exemplo abaixo usamos a tag <div> para estruturar três blocos. Perceba que em cada <div> colocamos um valor diferente para o atributo ID, isto é fundamental quando usamos <div>, pois entendemos que cada uma dessas tags receberá uma formatação diferente.
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Entendendo o box model</title>
</head>
<body>
<div id="box1">Exemplo de box model</div>
<div id="box2">Exemplo de box model</div>
<div id="box3">Exemplo de box model</div>
<div id="box4">Exemplo de box model</div>
<div id="box5">Exemplo de box model</div>
</body>
</html>
Clique aqui e Veja o resultado das tags acima
Vamos considerar formatar o HTML acima usando o conceito do box model.
body{
font-family: Arial, Verdana, Tahoma, Sans-Serif;
font-size: 12px;
}
#box1{
background-color: #999999;
padding: 20px;
}
#box2{
background-color: #009999;
padding: 10px;
width: 300px;
height: 50px;
}
#box3{
padding: 10px;
border: 2px solid #FF0000;
margin: 20px;
width: 150px;
}
#box4{
background-color: #D8D8C5;
padding: 5px 10px 15px 20px;
height: 150px;
width: 150px;
}
#box5{
background-color: #BBF3A3;
border: 2px dotted #008000;
padding: 10px 5px 10px 5px;
margin: 10px 0px 10px 0px;
width: 300px;
height: 100px;
}
Analisando o código CSS acima:
COMPARTILHE: Facebook Twitter WhatsApp