Na construção de uma página web, devemos nos atentar à formação de blocos ou elementos in-line.
Blocos são utilizados com proposito geral de cabeçalhos, tabelas, juntando um conteúdo principal em um mesmo bloco semântico. Já elementos in-line são como pequenos fragmentos em negrito, itálico, dentro de alguma frase ou parágrafo, sem propósito de união de conteúdo e / ou semântico.
A propriedade já vem por padrão no CSS, porém, é possível alterá-la com a propriedade display.
p {
display = block;
}
Temos: block, inline, inline-block e none.
O valor none esconde o elemento ou objeto a qual foi atribuída este valor.
Todo elemento em uma página é uma caixa retangular.
Cada parte do modelo de caixa corresponde a uma propriedade CSS: width (largura), height (altura), padding, border e margin.
div {
border: 6px solid #949599; // <grossura> <padrão> <cor da borda>
height: 100px;
margin: 20px;
padding: 20px;
width: 400px;
}
A largura total de um box model pode ser calculado por:
margin-right + border-right + padding-right + width + padding-left + border-left + margin-left
Enquanto isso, a altura total de um box model pode ser calculado por:
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom