Aula em video:

Box model

Para que a página da web tenha seu conteúdo alinhado, bem espaçado, organizado e harmônico de se ver, todos os textos e imagens são organizados em caixas(por meio da tag <div>, por exemplo) que podem ter diferentes propriedades, sendo algumas delas: o espaçamento externo, o espaçamento interno e suas bordas.

Margin

O espaçamento externo, ou margem, é a distância entre as caixas de uma página ou entre uma caixa e o canto da tela, podendo ser configuradas em todas as direções através das propriedades margin, margin-top, margin-right, margin-left e margin-bottom.

Pode-se atribuir valores fixos a essas propriedades em pixels, centímetros, milímetros, ou valores relativos, como a porcentagem do tamanho atual da tela.

margin: Margem em todas as direções;

margin-top: Margem acima da caixa;

margin-right: Margem à direita da caixa;

margin-left: Margem à esquerda da caixa;

margin-bottom: Margem abaixo da caixa.

#caixa {margin: 5px 10px 15px 20px;} 

#caixa {
	margin: 2px;
}

Padding

O espaçamento interno, por sua vez, é a distância entre o conteúdo de uma caixa e sua borda. Pode ser configurada pelas propriedades padding, padding-top, padding-right, padding-left e padding-bottom. Também podem ter atribuídos valores fixos ou relativos.

padding: espaçamento em todas direções
padding-top: espaçamento superior da caixa;
padding-right: espaçamento à direito da caixa;
padding-left: espaçamento à esquerdo da caixa;
padding-bottom: espaçamento à parte inferior da caixa.

#caixa {padding: 5px 10px 15px 20px;}

#caixa {
	padding: 2px;
}

Border

Já a borda é o contorno da caixa. Pode ter seu estilo alterado pela propriedade border-style, sua grossura pela propriedade border-width com valores fixos ou negativos, sua cor pela propriedade border-color e o arredondamento de suas pontas pela propriedade border-radius com valores fixos.

dotted: borda pontilhada;

dashed: borda hachurada(pequenos traços);

solid: borda sólida(linha continua);

double: borda dupla;

none: sem borda;

#caixa {
	border-color: red;
	border-width: 3px;
	border-style: dotted;
}

#caixa {
	border-color: #882bd1;
	border-width: 5px;
	border-style: dashed;
}

#caixa {
	border-color: RGB(3,70,8);
	border-width: 5px;
	border-style: solid;
	border-radius:15px
}

#caixa {
	border-color: HSL(247,58%,43%);
	border-width: 2px;
	border-style: double;
}

Exemplo HTML

Exercício

Usar os conceitos de espaçamento interno e externo e bordas abordados na aula para formatar a página “exercicio.html” de forma que fique parecida com a página “exemplo.html”

*dica: Use o site www.w3schools.com/css para de ajudar

Exercicio HTML

Arquivos do exercício e exemplo

https://drive.google.com/drive/folders/1_x8rBXhJFXXHZTKWT35oCw_P5FISn5i7?usp=sharing