Prof.

Ancelmo Luiz
BOX MODEL
Box Model
O box model (modelo das caixas) em css,
descreve os boxes (as caixas) geradas pelos
elementos HTML.

Para o navegador, qualquer tag uma caixa
com alguma coisa dentro dela.

Box Model
Ao redor do contedo, esto diferentes
propriedades que compe a caixa:

Padding (espaamentos)
Border (bordas)
Margin (margens)

Propriedade Margin
Um elemento tem quatro lados: right, left, top e
botton (direito, esquerdo, superior e inferior). A
margem a distncia entre os lados dos elementos
vizinhos (ou s bordas do documento).
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

martin: top | right | bottom | left
margin:10px 10px 10px 10px;
Propriedade Padding
Padding define a distancia entre a borda e o
contedo do elemento.
padding-top:10px;
padding -right:10px;
padding -bottom:10px;
padding -left:10px;

padding: top | right | bottom | left
padding:10px 10px 10px 10px;
Propriedade Border
Uma borda simplesmente uma linha que
contorna um elemento.

border-top:1px dashed black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;

border: width | style | color;
Border: 1px solid Red;