css - How can I make the width of my <figcaption> match the width of the <img> inside its <figure> tag?

Question

Say, I got this code:

<figure>
 <img src="bunnyrabbit.jpg" width="200" height="150" alt="An image of a bunny rabbit." />
 <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

If I don't use any CSS the figcaption will expand the width of the figure element beyond 200px. How can I prevent this?

I know I can force the text inside the figcaption to wrap by specifying the width of the figure element (<figure style="width:200px;">) but I don't really want to use this for each and every image.

Answer 1

Adding this Code to <figure> and <figcaption> CSS-Attributes helped me with the same problem. Also, it preserves the responsivenes of your images and captions.

figure { display: table; }


figcaption { display: table-caption; caption-side: bottom ; }

1. Adding display: table; sets the stage.

2. Adding display: table-caption; alone placed the caption on top of the image, The caption-side property specifies the placement of the table caption at the bottom, top is default.