Seo Portugal
 
 
Segunda, 21 Janeiro 2019
 
 

A box model


A box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento. Abaixo apresentamos um diagrama representando a estrutura de construção do box model:
O box model em CSS
css-box.gif
 A ilustração acima é teórica. Vamos explicá-la na prática tomando como base um cabeçalho e um texto. O HTML para exemplo (o texto foi retirado da Declaração Universal dos Direitos do Homem):


<h1>Artigo 1:</h1>

<p>Todos os homens nascem livres
e iguais em dignidade e direitos.
 São dotados de razão e consciência
e devem agir em relação uns aos outros
com espírito de fraternidade.</p>

Definindo estilos para cores e fontes:

Box Model CSS

O exemplo contém dois elementos: <h1> e <p>. A box model para os dois elementos é mostrado a seguir:
Box Model CSS Exemplo

A ilustração mostra como cada um dos elementos é limitado numa box (uma caixa). Boxes que podem ser ajustados e controlados via CSS.