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

[Dúvida] padding da classe .container__imagem

Estou com problema no padding entre os icones do cabeçalho, os do meu parece que está maior, mas a medida é a mesma do que da instrutora, no caso 1em.

Meu fica assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Já o da instrutora:

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

Segue meu 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;
}

.lista-menu{
    display:none;
}

html

<!DOCTYPE html>
<html lang="en">
<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="reset.css">
    <link rel="stylesheet" href="styles.css">
    <title>AluraBooks</title>

</head>
<body>
    <header class="cabecalho"> 
        <div class="container">
            <input type="checkbox" id="menu" class="container__botao">
                <label for="menu">
                    <span class="cabecalho__menu-hamburguer container__imagem"></span>
                </label>
                <ul class="lista-menu">
                    <li class="lista-menu__titulo">Categorias</li>
                    <li class="lista-menu__item"><a href="#" class="lista-menu__link">Programação</a></li>
                    <li class="lista-menu__item"><a href="#" class="lista-menu__link">Front-end</a></li>
                    <li class="lista-menu__item"><a href="#" class="lista-menu__link">Infraestrutura</a></li>
                    <li class="lista-menu__item"><a href="#" class="lista-menu__link">Business</a></li>
                    <li class="lista-menu__item"><a href="#" class="lista-menu__link">Desgin & UX</a></li>
                </ul>
            <img src="img/Logo.svg" alt="Logo da Alurabooks" class="container__imagem">
        </div>
        <div class="container">
            <a href="#"></a> <img src="img/Favoritos.svg" alt="Meus favoritos" class="container__imagem">
            <a href="#"></a> <img src="img/Compras.svg" alt="Carrinhos de compras" class="container__imagem">
            <a href="#"></a> <img src="img/Usuário.svg" alt="Meu Perfil" class="container__imagem">
        </div>
    </header>
</body>
</html>

Eu estou avançando no desenvolvimento pois não encontrei o problema, por isso já tem a lista dos itens.

3 respostas

O padding é uma propriedade que cria espaço em torno do conteúdo de um elemento, dentro de suas bordas. É possível que outros estilos em sua folha de estilos estejam afetando o tamanho total do elemento, o que pode afetar a aparência do padding.

No entanto, não tenho como visualizar o problema diretamente, já que você mencionou imagens, mas não as forneceu. Porém, aqui estão algumas coisas que você pode verificar:

  1. Tamanho do elemento: Certifique-se de que o tamanho do elemento (por exemplo, o width e height) é o mesmo que o da instrutora.
  2. Outras propriedades de estilo: Verifique se há outras propriedades de estilo aplicadas ao elemento que poderiam estar afetando a aparência do padding. Isso inclui bordas, margens e outros espaçamentos.
  3. Box sizing: A propriedade box-sizing define como o navegador deve calcular o tamanho total de um elemento. Se definido como border-box, o padding e a borda são incluídos na largura e altura do elemento. Se definido como content-box (o padrão), o padding e a borda são adicionados à largura e altura do elemento.
  4. Estilos herdados: É possível que o elemento esteja herdando estilos de um elemento pai que estejam afetando a aparência do padding.
  5. Desvios do navegador: Os navegadores podem ter ligeiras diferenças na maneira como renderizam o CSS. Se você e a instrutora estão usando navegadores diferentes, isso pode causar discrepâncias.

Recomendo usar a ferramenta de inspeção de elementos do seu navegador para examinar o elemento e ver quais estilos estão sendo aplicados a ele. Isso pode ajudá-lo a identificar quaisquer estilos problemáticos que possam estar afetando a aparência do padding.

Encontrei o problema, era realmente as imagens. Baixei o conteúdo da instrutora ao final do módulo 2.. e havia divergência no tamanho entre as dela e as que eu baixei do figma.

Por algum motivo, as que fiz o download ficaram com o SVG maior, só não entendi o porque... É comum acontecer divergências ao realizar o download no figma? mesmo sendo a mesma extensão e mesmo arquivo?

solução!

Fala Daniel. tudo bem?

as suas imagens estão maiores pois você está usando zoom no navegador, coloque no zoom padrão que todos os códigos irão funcionar normalmente. Insira aqui a descrição dessa imagem para ajudar na acessibilidade