Caption tails trailing below image in figcaption position absolute

Question

I am trying to position a caption over the bottom part of an image using position absolute and bottom 0 which it is doing, but the tails of the g and the y letters area dangling down below the edge of the image. Is this expected behavious and do I just have to adjust my positioning of the caption up a bit?

Here's the code:

.article-image,
figure {
  margin: 1.5em 0;
}

figure {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, .6);
}

cite {
  font-size: 0.85em;
}

<figure>
  <img class="aside-image" src="images/grayson-perry.jpg">
  <figcaption>I've moved out just as Walthamstow is becoming gentrified. My work is done.</figcaption>
</figure>
<cite>- Graysen Perry</cite>

I wouldn't expect the tail of the g and the y to hang down below the edge of the image.

Without the **actual** image this is hard to detect but my *guess* is that you need to set the image to `display:block`. — Paulie_D, Oct 15 '19 at 12:37

score 0 · Answer 1 · answered Oct 15 '19 at 12:37

Make the image display:block and if you don't want the text to flow off the right of the image, make the figure inline-block

.article-image,
figure {
  margin: 1.5em 0;
}

figure {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  position: relative;
  display:inline-block;
}

figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, .6);
}

cite {
  display:block;
  font-size: 0.85em;
}

.aside-image {
  display:block;
}

<figure>
  <img class="aside-image" src="https://www.fillmurray.com/300/300">
  <figcaption>I've moved out just as Walthamstow is becoming gentrified. My work is done.</figcaption>
</figure>
<cite>- Graysen Perry</cite>

Caption tails trailing below image in figcaption position absolute

1 Answers1