Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] padding da classe .container__imagem

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Criando o Menu Hambúrguer

por Daniel Fernando de Witt Schumann
| 72.6k xp | 18 posts
Analista de Sistemas

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
por Diogo Santos
| 204.2k xp | 76 posts
Especialista em Operações Portuárias

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.

por Daniel Fernando de Witt Schumann
| 72.6k xp | 18 posts
Analista de Sistemas

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!
por THIAGO HENRIQUE NUNES DE LIMA
| 25.9k xp | 11 posts

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