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

MARGIN NO MAPA

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Melhorando o CSS e atividade Aplicando gradientes

por Anderson Ribeiro Sant'Ana
| 114.1k xp | 88 posts
Escrevente

Bom dia.

Tudo bem?

Na aula 03 do módulo 03 do Curso, quando é criado uma div para o mapa 

      <div class="mapa-conteudo">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d117020.84623914324!2d-46.66757818965264!3d-23.571982858963782!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sAlura%2C%20S%C3%A3o%20Paulo!5e0!3m2!1spt-BR!2sbr!4v1631530405269!5m2!1spt-BR!2sbr"
          width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
      </div>
.mapa-conteudo{
  width: 940px;
  margin: 0 auto;
}

Por que não devemos criar uma class direto no mapa?

4 respostas
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Anderson, tudo bem?

Nosso intuito é que a section .mapa preencha 100% da width da tela por conta do background que foi aplicado e o .mapa-conteudo, que é o mapa propriamente dito, não ocupe totalmente essa largura.

Para que esse efeito ocorra é necessário que a width seja aplicada apenas ao .mapa-conteudo junto com o margin, pois é ele que fará com que o mapa fique centralizado e com as margens horizontalmente. Caso contrário, esse seria o efeito:

  • margin e width sendo aplicadas ao .mapa:

Com a margem sendo aplicada aos 940px de toda a section o background não ocuparia 100%.

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

  • margin sendo aplicada ao .mapa:

Com isso, o background teria o resultado esperado mas o mapa em si não ficaria com as magens laterais. Veja:

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

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

por Anderson Ribeiro Sant'Ana
| 114.1k xp | 88 posts
Escrevente

Certo, entendi, a questão é por que não aplicar no

          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.4483278365396!2d-46.63466568562861!3d-23.588249068469487!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum!5e0!3m2!1spt-BR!2sbr!4v1568814489656!5m2!1spt-BR!2sbr"
            width="100%"
            height="300"
            frameborder="0"
            style="border: 0"
            allowfullscreen=""
          ></iframe>
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Opa, Anderson!

Obrigada pelo retorno.

Neste caso, não funcionaria porque o <iframe> por padrão é um elemento inline e a propriedade margin não funciona corretamente nesses elementos, para que fosse possível utilizar o margin direto no iframe, seria necessário acrescentar o display: block nesse elemento. Dessa forma:

iframe {
    width: 940px;
    margin: 0 auto;
    display: block;
}

Irá ter o mesmo resultado visual que o .mapa-conteudo, é só uma outra forma de fazer.

Caso queira saber mais sobre elementos inline e elementos block, segue a indicação de leitura

Se tiver mais alguma dúvida, fique a vontade!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.Bons Estudos!
por Anderson Ribeiro Sant'Ana
| 114.1k xp | 88 posts
Escrevente

Obrigado Beatriz!