Better captioned images on Listed

I realized that I have been using the figcaption HTML element incorrectly, when I originally added the photo of a Nazi book burning to my post about Twitter and the pink lists.

I was trying something like the following, to get text to land below my images:

![An image.](http://example.com/image.jpeg)
<figcaption>A caption.</figcaption>

This isn't using figcaption correctly, though. And I needed some negative top-margin to align the caption a little closer to the image, as well as some bottom-margin to not run up against the next paragraph.

I suppose I was holding out for something a little more markdown-native. But it turns out the figure element isn't that hard to just use in Listed:

<figure>
  <img src="http://example.com/image.jpeg">
  <figcaption>A caption.</figcaption>
</figure>

There's no alt text, but thing is, if you are using figcaption, I understand you don't need it. Screen readers may read both the alt text and the caption, actually, which requires further work to suppress.

The way I'm using captions, this seems right. And there's some built-in margins to the figure element that make me very happy with very little additional customization:

figure {
  margin-bottom: 22px;
}

figcaption {
  font-size: 14px;
  text-align: center;
  line-height: 1.5em;
  margin: 4px;
}

Main thing here is margin—I just needed a little more space to make me happy with it.

I've updated all the things, which thankfully wasn't much.