Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Problema body

O body do meu arquivo não ocupa toda a pagina, deixando uma margem em cima mesmo eu seguindo os professores Alguém pode me ajudar ?

3 respostas
solução!

Olá Manoel, tudo bem?

Pelo que entendi, você está tendo problemas com o body do seu arquivo HTML, certo? Uma possível solução para esse problema é adicionar o seguinte código CSS:

body {
  margin: 0;
  padding: 0;
}

Esse código irá remover as margens e o preenchimento padrão do body, fazendo com que ele ocupe toda a página.

Caso essa solução não funcione, verifique se não há outras propriedades CSS que estejam interferindo no body. Além disso, certifique-se de que o seu HTML está sendo fechado corretamente.

Outra opção seria usar um reset CSS, existem vários na internet.

  • Tá, mas o que seria um reset.css?

Um reset.css é um arquivo CSS que redefine o estilo padrão dos elementos HTML em um navegador. Ele é usado para neutralizar as diferenças de renderização entre os navegadores, fornecendo uma base consistente para o desenvolvimento de sites.

O objetivo principal de um reset.css é remover os estilos predefinidos aplicados pelos navegadores a elementos como margens, preenchimentos, tamanhos de fonte, entre outros. Ao fazer isso, o desenvolvedor pode começar a estilizar a página a partir de uma base limpa e consistente em todos os navegadores.

Existem vários sites que oferecem reset.css de qualidade na web. Alguns exemplos incluem:

  1. Normalize.css: É um reset.css que é amplamente utilizado e suporta uma ampla variedade de navegadores.

  2. Meyerweb CSS Reset: Desenvolvido por Eric Meyer, é uma opção popular que oferece um reset abrangente e fácil de usar.

  3. HTML5 Doctor CSS Reset: Um reset.css focado em elementos HTML5, projetado para fornecer uma base consistente para sites que utilizam as novas tags HTML5.

Esses são apenas alguns exemplos de reset.css disponíveis na web. Cada um tem suas características e é importante escolher aquele que melhor se adapta às necessidades específicas do projeto.

Em suma seria isso, caso precise de mais algo estarei aqui!

Abraços e bons estudos!

Boa tarde,renan Tentei usar essa solução mas não funcionou, e eu não faço ideia de como usar um reset.css. Você poderia da uma olhada no meu código,por favor ? https://github.com/viana-manoel/Portfolio

Olá Manoel, tudo bem contigo?

O que aconteceu no seu site foi que quando você inspecionava a tag body no devtools você encontrava um espaço do conteúdo para o topo da tela, correto?

Bom basicamente o que acontece ali é que existe no seu "index.html" uma tag header acima da tag main que é onde se localiza todo o conteúdo do seu site, e assim como isso que aconteceu com o topo da tela pode e muito provavelmente vai acontecer com o fundo do seu site, pois lá existe uma tag chamada footer que está vazia assim como a tag header, dessa forma pelo fato de você ter elas ali e não ter conteúdo nelas elas estão ocupando um espaço na aplicação.

Outro fator que influencia nisso também é o fato que você colocou a propriedade margin na tag apresentacao que é justamente a classe da tag main, como pode ser visto abaixo:

.apresentacao{
    /* Eu me referi à essa parte do margin */
    margin: 10% 15%;
    display: flex;
    align-items:center;
    justify-content:space-between;
}

Se você tirar essa parte do margin ou somente mudar o valor de 10% para 0, você vai ver que o body irá ocupar a tela toda, ou caso você coloque algum conteúdo nas tag´s header e footer será possível fazer o body ocupar toda a tela.

Em suma seria isso, caso você não tenha entendido algo ou eu não tenha explicado tudo direito peço que você me retorne para que eu possa lhe auxiliar de outra forma.

Espero ter ajudado, caso precise estarei aqui!

Abraços e bons estudos.