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

[Dúvida] space-between não aparente

Código HTML <header class="cabecalho"> <div class="container"> <span class="cabecalho_menu-hamburguer container_imagem"></span> <img src="img/logo.svg" alt="Logo da AluraBooks" class="container_imagem"> </div> <div class="container"> <a href="#"> <img src="img/favoritos.svg" alt="Meus Favoritos" class="container_imagem"></a> <a href="#"> <img src="img/compras.svg" alt="Carrinho de Compras" class="container_imagem"></a> <a href="#"> <img src="img/usuario.svg" alt="Meu Perfil" class="container_imagem"></a> </div> </header>

Código styles.css

@import url(header.css);

:root {
    --cor-de-fundo: #EBECEE;
    --branco:#ffffff;
}

body {
    background-color: var(--cor-de-fundo);
}

Código header.css

.cabecalho_menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/menu.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.cabecalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {
    display: flex;
    align-items: center;
}

.container_imagem {
    padding: 1em;
}

Mas o Menu não aparenta reconhecer o space-between Insira aqui a descrição dessa imagem para ajudar na acessibilidade

8 respostas

Oi, Ana!

Acredito que o padding: 1em; na classe container_imagem está fazendo com que as imagens ocupem mais espaço, dando a sensação de que o justify-content: space-between; não está funcionando.

Ao inspecionar a tag header no DOM do navegador, utilizando a ferramenta DevTools, é possível visualizar um pouco melhor o que está acontecendo com o espaçamento gerado pelo justify-content: space-between;

tag header no DOM do navegador

Aquela cor roxa é o espaçamento gerado pelo justify-content: space-between;.

Se diminuir um pouco o padding: 1em; ou comentá-lo, acredito que fique mais fácil de visualizar o justify-content: space-between;.

Abraços!

Olá Gabriel!

Aí tem um pulo de gato, pois olha essa situação. Em outras telas eu consigo visualizar, o space-between só deixa de ser aparente na tela 844px; Tem alguma sugestão nesse caso?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Está um pouco estranho mesmo.

Você teria o código no GitHub para dar uma olhada?

Utilizando o código que você disponibilizou acima funcionou certinho aqui.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Primeira vez que enviei pro GitHub, acredito que tenha feito certo... https://github.com/atpoetry/AluraBooks

solução!

Fez certinho sim!

Consegui identificar o que está acontecendo.

As imagens que você está usando são um pouco maiores devido a um espaçamento que está ao redor do ícone.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Já as imagens que estão no repositório do projeto não possuem esse espaçamento.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Devido ao espaço adicional na imagem, ao adicionar o padding: 1em;, o espaço ocupado é maior do que realmente desejamos.

Você pode encontrar as imagens menores no repositório do projeto. https://github.com/alura-cursos/alurabooks/tree/aula02/img

De todo os erros que imaginei, nem cheguei a cogitar ser o tamanho das imagens... Só tem um porém, alterei e agora desformatou o resto. https://github.com/atpoetry/AluraBooks

O que pode ter acontecido?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Rodei novamente aqui e não ocorreu esse problema. Parece estar tudo certo.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Abri em outros dois navegadores e está funcionando 100%, abrindo no Edge apresenta essa formatação estranha para mim. Vou continuar o projeto e monitorando, deve ser algum bug do navegador, já que nos outros está funcionando.