<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dev tools</title>
<link rel="stylesheet" href="./styles/style_DevTools.css" />
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<section>
<div>
<p class="paragrafo__inspecionando">
5) Inspecionando elementos e entendimento do modelo de caixa Como
quem trabalha com front-end, você precisa entender como os estilos
são aplicados aos elementos da sua página. Use as ferramentas de
desenvolvimento (DevTools) do navegador para inspecionar o modelo de
caixa de um elemento do seu site. Preste atenção nas propriedades
margin, border, padding e content. Descreva como essas propriedades
estão afetando o elemento selecionado.
</p>
</div>
<div>
<p class="paragrafo__aplicando">
6) Aplicando o modelo de caixa na prática Agora que você entendeu o
modelo de caixa CSS, aplique esse conhecimento no seu projeto.
Selecione um elemento específico (por exemplo, um parágrafo) e
ajuste as propriedades de margin, border, padding e content. Observe
como cada alteração afeta o posicionamento e a aparência do elemento
na página.
</p>
</div>
</section>
</main>
<footer></footer>
</body>
</html>
/* Resetar os estilos padrões do navegador */
* {
margin: 0;
padding: 0;
}
/* Aplicar novos estilos */
.paragrafo__aplicando{
margin: 15px; /*[MARGIN] É o espaço ao redor do elemento, fora da borda. Separa um elemento de outros elementos
ao seu redor.
Consequência: Não afeta a renderização interna do elemento, mas afeta a distância entre o
elemento inspecionado e outros elementos na página. Usada para controlar o espaçamento
entre os elementos.*/
border: 2px; /*[BORDER] É a linha que fica ao redor do conteúdo e do preenchimento. Pode ser definido largura, cor e
estilo. Fica fora do preenchimento, mas dentro da área total do elemento.
Cosequência: Pode aumentar o espaço total do elemento na página, afetando o layout*/
border-color: blue;
padding: 10px; /*[PADDING] É o espaço entre o conteúdo e a borda do elemento,
cria um espaçamento interno entre o conteúdo e a borda
Consequêcia: Aumenta o espaço dentro do elemento sem afetar diretamente a altura
ou a largura. Espaço adicionado dentro da caixa*/
content: 5px; /*[CONTENT] É a área de exibição do conteúdo (imagens, texto...)A altura do conteúdo
e a sua largura definidas usando as propriedades [width] e [height] do elemnto.
Consequência: O núcleo do elemento é o conteúdo, tudo que é adicionado nesse elemento
aparece nesta área. */
}
