A box modelA 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: ![]() O exemplo contém dois elementos: <h1> e <p>. A box model para os dois elementos é mostrado a seguir: ![]() A ilustração mostra como cada um dos elementos é limitado numa box (uma caixa). Boxes que podem ser ajustados e controlados via CSS. |