AS EDIÇÕES INICIAIS DERAM CERTO | Flexbox: posicione elementos na tela

2
respostas

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Grid principal e limitações do flexbox e atividade Terminando course grid

por Marilha Gabriella Joaquim De Souza

| 26.6k xp | 1 posts

Vendedora

No momento estou usando o EDGE como navegador, as configurações iniciais do CSS que ele passou:

.conteudoPrincipal-cursos {
  display: flex;
  flex-wrap: wrap;
}

.conteudoPrincipal-cursos-link {
  width: 23%;
}

deram todas certas no meu navegador, sem precisar acrescentar:

.conteudoPrincipal-cursos-link:nth-child(4n+1) {
    margin-left: 0;

}

Eu gostaria de saber se eh alguma atualização do CSS que já deixam essas margens automáticas para cada tipo de navegador ou se, coincidentemente, para o navegador EDGE as configurações do CSS são certas

2 respostas

por Douglas Marcelo Masciel Santos

| 38.7k xp | 18 posts

14/02/2023

Cada navegador tem a sua apresentação por padrão e esse comportamento individualizado pode gerar conflitos de layout diante do seu projeto web.

O ideal é você dar um reset nas margens para não depender do que vem configurado no navegador.

Para isso você pode usar o seguinte comando no seu css:

*{
    margin:0;
    padding: 0;
}

se você quiser saber mais sobre o assunto te indico esse artigo: https://www.alura.com.br/artigos/o-que-e-reset-css

por Cailane Rodrigues Silveira

| 83.9k xp | 32 posts

Recepcionista

14/02/2023

Mas no HTML do projeto já existe o reset.css, com margin e padding zerados. Print do trecho do arquivo reset.css em que mostra o padding e margin sendo zerados No meu navegador (Chrome) também está ocorrendo isso e não encontro onde devo alterar para ficar adequado com o do professor...