Exercício 025 - Box Model

Voltar para Módulo 02

<h1>Modelos de Caixas na Prática: a tag <h1> é exemplo de BOX LEVEL, mas o <span> é um exemplo de BOX IN LINE,</span>

<p>PERCEBA A DIFERENÇA da tag <p> dentro de h1, pois ela é BOX LEVEL e pula uma linha.</p>

</h1>

Parágrafos - tag <p> - são exemplos de BOX LEVEL, mas os Links - tag <a> são exemplos de caixas em linha ou BOX IN LINE.

BOX LEVEL: sempre pula uma linha e sempre ocupa 100% do viewport. EXEMPLOS: div, h1-h6, p, main, header, nav, article, aside, footer, form, video e outros.

IN LINE LEVEL: não pula a linha e só ocupa o viewport do objeto.EXEMPLOS: span, a, code, strong, em, sup, sub, label, button, input e outros

imagem modelo de caixas ou box model image

No Box Model ou Modelo de Caixas temos os seguintes itens: conteúdo com WIDTH e HEIGHT ou largura e altura, depois o PADDING distância entre conteúdo e a borda, após temos a borda ou BORDER, logo após temos o OUTLINE ou linha de fora da borda ou contorno da borda e por último temos a margem ou MARGIN.