Olá, João Pedro! Tudo bem?
Essa é uma dúvida muito comum quando estamos começando no Front-end. O que você está sentindo — de que o seu layout parece "maior" ou ocupa mais espaço que o do vídeo, mesmo com os valores de CSS idênticos — geralmente não é um erro no seu código, mas sim uma questão de resolução de tela e densidade de pixels.
Por que isso acontece?
Quando definimos um tamanho em px (pixels), estamos usando uma unidade absoluta no mundo digital. No entanto, o "espaço" que esses pixels ocupam visualmente depende da resolução do seu monitor:
- Resolução do Monitor: Se a pessoa que gravou o vídeo usa um monitor 4K ou uma tela com resolução muito alta (como um MacBook Pro), 24px parecerão pequenos porque há muitos pixels concentrados em um espaço físico reduzido.
- Densidade de Pixels (DPI/PPI): Em monitores padrão (Full HD), os pixels são fisicamente maiores, então o texto parece ocupar mais espaço na tela.
O que verificar no seu código:
Analisando seu print do VS Code, o código está perfeito e segue as boas práticas. Mas, para garantir que nada está "empurrando" seu texto para baixo e ativando a rolagem, verifique estes dois pontos:
- Line-height: Às vezes, o parágrafo
p herda uma altura de linha muito grande. Você pode tentar adicionar line-height: 1.5; (ou um valor aproximado) dentro da regra do p para ver se o texto fica mais compacto. - Reset de CSS: Verifique se você resetou as margens padrões. O navegador adiciona margens automáticas ao
h1 e ao p. Se você não as zerou, elas se somam e ocupam espaço extra:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Fique tranquilo!
Se o seu zoom está em 100% e o código está igual ao da aula, você não perdeu nenhum detalhe. Conforme você avançar no curso, verá que usamos unidades relativas (como rem e em) e Media Queries justamente para resolver esse problema, permitindo que o site se adapte a diferentes tamanhos de tela e resoluções sem quebras.
Seu layout está ficando ótimo e as cores estão muito bem aplicadas!
Espero que possa ter lhe ajudado!
Você já chegou a abrir o "Inspecionar Elemento" (F12) no navegador para ver se o parágrafo está com alguma margem laranja ao redor dele? Isso pode te mostrar exatamente quem está ocupando esse espaço extra!
