When using tag div inside a parent element that has padding, the left padding is shown

Question

When using <div> within an element <figcaption> with padding: 10px and putting the div with bottom: 0px relating to <figcaption>, the right padding of <figcaption> does not appear.. Someone can explain to me why this happens?

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>

Now, "figure.photo-caption figcaption" without padding property:

Answer 1

What is happening is that the position: absolute makes you position the element according to the properties specifications top, right, bottom and left, then ends up "disregarding" this padding of the father.

To have the desired effect, you can use the value inherit so that the element has the same padding that the father.

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 */
}

See working:

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>