Entrar Ainda não tem acesso?
2
respostas

Padding e Margin sendo sobrepostos

por Estudante
| 33.5k xp | 4 posts

Pessoal, Preciso de uma ajuda para entender uma questão:

Quando eu aumento o padding/margin da imagem, o container da imagem não cresce junto. A consequência é que a segunda div (classe opcao) fica sobrepondo a imagem. Como resolver isso?

<header>
        <nav>
            <div class="div_hamburguer">
                <img src="img/menu.png" class="hamburguer">
            </div>
            <div class="opcao">
                <ul class="lista">
                    <li> opção 1</li>
                    <li> opção 2</li>
                    <li> opção 3</li>
                    <li> opção 4</li>
                    <li> opção 5</li>
                    <li> opção 6</li>
                </ul>
            </div>
        </nav>
    </header>

*{
    padding: 0;
    margin: 0;
}

nav{
    display: flex;
    background-color: rgb(131, 245, 56);
}

.div_hamburguer{
}

.hamburguer{
    width: 50px;
    height: 50px;
    margin-left: 20%;
    margin-right: 20%;
    background-color: rgb(212, 22, 230);
   
   
}

.opcao{
    width: 100%;
}

.lista{
    display: flex;
    flex-wrap: wrap;
}

.lista li{
    list-style: none;
    flex-basis: 33%;
    background-color: brown;
    
}
2 respostas
por Estudante
| 70.2k xp | 55 posts

Olá estudante!

Para resolver o problema de sobreposição da segunda div (classe opcao) sobre a imagem, você pode ajustar o posicionamento dos elementos e a forma como o espaço é distribuído no contêiner.

Aqui estão as etapas para resolver o problema:

  1. Adicionar um padding-left ao elemento .div_hamburguer para criar um espaço para a imagem. Isso evitará que a classe .opcao sobreponha a imagem:
.div_hamburguer {
    padding-left: 20px; /* Ajuste o valor conforme necessário */
}
  1. Em vez de usar margin-left e margin-right para centralizar a imagem, você pode usar margin com valor auto. Isso alinhará automaticamente a imagem ao centro do contêiner:
.hamburguer {
    width: 50px;
    height: 50px;
    margin: 0 auto; /* Centralizar a imagem horizontalmente */
    background-color: rgb(212, 22, 230);
}
  1. Para evitar que os itens da lista (.lista li) se sobreponham, você pode adicionar um espaçamento entre eles usando margin. Além disso, para que cada item ocupe uma única linha, você pode usar flex: 1:
.lista li {
    list-style: none;
    flex: 1; /* Cada item ocupará uma única linha */
    margin: 5px; /* Adicione um espaçamento entre os itens */
    background-color: brown;
}

Com esses ajustes, a imagem e a lista devem ser dispostas corretamente, sem sobreposições.

Aqui está o código CSS completo com as alterações:

* {
    padding: 0;
    margin: 0;
}

nav {
    display: flex;
    background-color: rgb(131, 245, 56);
}

.div_hamburguer {
    padding-left: 20px;
}

.hamburguer {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background-color: rgb(212, 22, 230);
}

.opcao {
    width: 100%;
}

.lista {
    display: flex;
    flex-wrap: wrap;
}

.lista li {
    list-style: none;
    flex: 1;
    margin: 5px;
    background-color: brown;
}

Espero que isso ajude a resolver o problema! Se você tiver mais dúvidas, é só perguntar! Estou aqui para ajudar.

por Estudante
| 33.5k xp | 4 posts

Olá, Bem, com o "padding left" de 20px e o "margin 0 auto" não produziu o resultado esperado: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

  1. O problema inicial é que a DIV (classe div_hambuguer) não está crescendo quando o margin ou padding da imagem (classe hamburguer) cresce. Conforme o circulo vermelho abaixo, a DIV (classe div_hambuguer) não cresceu para acompanhar o crescimento do seu item interno: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

A grande questão é que tem algum conceito sobre expansão do container pai em decorrência do crescimento do filho, e eu não estou achando esse conceito, e isso está ocorrendo com a imagem sendo o filho.

Fiz uma DIV quadrada e vermelha (filha) para mostrar, coloquei margin nela. O que está pontilhado é o espaço do container PAI. O Container pai não cresceu: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

A DIV filha tem 50x50 e margin: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

OBS: Notei que tem a ver com a unidade % do margin-left e margin-rigut, se eu usar PX ao invés de %, a div PAI cresce junto com o filho, porém, não entendo porque a % não faz a div pai crescer.