0

Ao usar <div> dentro de um elemento <figcaption> com padding: 10px e colocando o div com bottom: 0px relativo ao <figcaption>, o padding direito do <figcaption> não aparece.. Alguém pode me explicar porque isso acontece?

figure.foto-legenda {
  border: 8px solid #80C46A;
  box-shadow: 2px 2px 8px black;
  position: relative;
  width: 364px;
  height: 232px;
}

figure.foto-legenda figcaption {
  background-color: rgba(192, 245, 175, 0.4);
  position: absolute;
  color: #000000;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  opacity: 0;
}

figure.foto-legenda:hover figcaption {
  opacity: 1;
  transition: opacity 0.2s;
}

p {
  text-indent: 40px;
  text-align: justify;
}

div.foto-legenda-texto {
  position: absolute;
  bottom: 0px;
}
<figure class="foto-legenda">
  <img src="_imagens/mapa-meca-ate-medina.jpeg" alt="Mapa da Arábia Saudita, mostrando as cidades de Meca e Medina" />
  <figcaption>
    <div class="foto-legenda-texto">
      <h4>Hégira: Fuga de Meca para Medina em 586.</h4>
      <p>Em 1º de setembro de 622 d.C, Maomé foge para Iatrebe em Medina.</p>
    </div>
  </figcaption>
</figure>

inserir a descrição da imagem aqui

Agora, "figure.foto-legenda figcaption" sem a propriedade padding:

inserir a descrição da imagem aqui

0

1 Resposta 1

1

O que está acontecendo é que o position: absolute faz com que você posicione o elemento conforme as especificações das propriedades top, right, bottom e left, então acaba "desconsiderando" esse padding do pai.

Para ter o efeito desejado, você pode usar o valor inherit para que o elemento tenha o mesmo padding que o pai.

div.foto-legenda-texto {
    position: absolute;
    bottom: 0; /* Para alinhar a base */
    left: 0; /* Para alinhar à esquerda */
    padding: inherit; /* Para ter o mesmo padding que o pai */
}

Veja funcionando:

figure.foto-legenda {
  border: 8px solid #80C46A;
  box-shadow: 2px 2px 8px black;
  position: relative;
  width: 364px;
  height: 232px;
}

figure.foto-legenda figcaption {
  background-color: rgba(192, 245, 175, 0.4);
  position: absolute;
  color: #000000;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  opacity: 0;
}

figure.foto-legenda:hover figcaption {
  opacity: 1;
  transition: opacity 0.2s;
}

p {
  text-indent: 40px;
  text-align: justify;
}

div.foto-legenda-texto {
  position: absolute;
  bottom: 0; /* Para alinhar a base */
  left: 0; /* Para alinhar à esquerda */
  padding: inherit; /* Para ter o mesmo padding que o pai */
}
<figure class="foto-legenda">
  <img src="https://picsum.photos/364/232" alt="Mapa da Arábia Saudita, mostrando as cidades de Meca e Medina" />
  <figcaption>
    <div class="foto-legenda-texto">
      <h4>Hégira: Fuga de Meca para Medina em 586.</h4>
      <p>Em 1º de setembro de 622 d.C, Maomé foge para Iatrebe em Medina.</p>
    </div>
  </figcaption>
</figure>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .