No curso fomos ensinados a colocar o atributo "box-sizing: border-box;" dentro das configurações da tag body, dessa forma todos os elementos filhos de body receberiam esse atributo. O problema é que quando faço isso o box sizing é aplicado ao body e não às tags que estão dentro dele.
Já dei uma olhada no código usado no projeto e ainda não descobri o que pode estar causando isso.
O mesmo problema se repete com todos os outros atributos, o box sizing foi só exemplo.
hoje, com a Alura e o Google Gemini
Oii Carlos, tudo bem?
Pode postar seu código aqui para darmos uma olhadinha? Assim talvez consigamos ajudar de maneira mais assertiva. Fico no aguardo.
Olá! Criei um repositório com o projeto para facilitar: https://github.com/viniciusm46/HTML/tree/main.
Também vou deixar o código abaixo. HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">
<title>Portfólio</title>
</head>
<body>
<header></header>
<main class="conteudo-principal">
<section class="texto-e-botoes">
<h1>Eleve seu negócio digital a outro nível <span class="destaque-titulo">com um Front-end de qualidade!</span></h1>
<p>Olá! Sou Carlos Vinicius, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
<a href="https://www.instagram.com/viniciusmorais92/" target="_blank" title="Abrir em nova guia">Instagram</a>
<a href="https://github.com/viniciusm46" target="_blank" title="Abrir em nova guia">GitHub</a>
</section>
<img src="vinicius.png" alt="Foto de Carlos Vinicius">
</main>
<footer></footer>
</body>
</html>
CSS: STYLE:
body {
height: 100vh;
background-color: hsl(0, 0%, 0%);
color: #f6f6f6;
box-sizing: border-box;
}
.conteudo-principal {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.texto-e-botoes {
display: flex;
flex-direction: column;
align-items: center;
}
.destaque-titulo{
color: #22d4fd;
}
h1 {
width: 593px;
height: 168px;
font-family: 'Krona One';
font-size: 36px;
font-weight: lighter;
line-height: 56px;
}
p {
width: 593px;
height: 144px;
text-align: justify;
font-family: 'Montserrat';
font-size: 24px;
line-height: 36px;
}
a {
background-color: #22d4fd;
background-image: url("fundo-botao.png");
font-family: 'Montserrat';
font-weight: 'SemiBold';
color: black;
text-decoration: none;
}
RESET:
*,
*:after,
*:before {
margin: 0;
padding: 0;
text-decoration: none;
}
body{
font-size: 100%;
list-style-type: none;
}
Não sei se vou conseguir te ajudar... porém a ordem dos arquivos css no html influenciam.
No seu caso, você tem reset.css depois de style.css no HTML. Isso significa que se houver alguma regra CSS conflitante entre esses dois arquivos, a regra em reset.css irá sobrescrever a regra em style.css.
Normalmente, o arquivo reset.css é colocado antes de outros arquivos CSS para garantir que todas as regras de reset sejam aplicadas primeiro e quaisquer estilos personalizados definidos em outros arquivos CSS possam sobrescrever essas regras de reset conforme necessário.
Portanto, você pode querer considerar mudar a ordem dos arquivos CSS no seu HTML para garantir que seus estilos personalizados em style.css não sejam sobrescritos pelas regras de reset em reset.css.
No momento infelizmente não consigo fazer testes, mas só isso pode talvez já resolver o problema que você está enfrentando.
Já sobre a questão do border-box especificamente:
A propriedade box-sizing: border-box; é aplicada ao elemento que você especifica e a todos os seus descendentes, a menos que você substitua essa propriedade em um descendente específico.
No seu caso, você aplicou box-sizing: border-box; ao elemento body. Isso significa que a propriedade será aplicada ao body e a todos os seus descendentes, a menos que você substitua essa propriedade em um descendente específico.
Se você deseja que todos os elementos na página herdem essa propriedade, você pode aplicá-la ao seletor universal , que seleciona todos os elementos.*
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-color: hsl(0, 0%, 0%);
color: #f6f6f6;
}
Espero que ajude o/
Obrigado pela disponibilidade e dicas :). Tentei o que você sugeriu e infelizmente ainda não funcionou. É como se por padrão o CSS estivesse aplicando os estilos só ao elemento pai, e não aos filhos. Criei outro projeto só pra testar isso, troquei de navegador, e o problema ainda continua.