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>
Agora, "figure.foto-legenda figcaption" sem a propriedade padding: