CSS unexplained vertical spacing

[xoggoth]

Found solution that works:

margin-bottom:-10px

There you are! using something with a bottom sorts any problem!

[xoggoth]

Doing a page of images with captions below. The images are of very different sizes and proportions.

Style:
.center {margin:0 auto; width:80%; max-width:1000px; border:1px solid black;}
.content {margin-left:2%;}
.pic {width:23%; margin-left:1%; vertical-align:bottom;}
.txt {width:23%; margin-left:1%; vertical-align:text-top; text-align:center; display:inline-block; background-color:yellow;}

HTML:
<div class="center">

<div class="content">
<img class="pic" alt="x" src="ottersonrocks.jpg">
<img class="pic" alt="x" src="clocktowerwest.jpg">
<img class="pic" alt="x" src="otters&ivy.jpg">
<img class="pic" alt="x" src="otterstails.jpg">

<h3 class="txt">balh blah</h3>
<h3 class="txt">lots of drivelin and stuff on and on<br></h3>
<h3 class="txt">tripe</h3>
<h3 class="txt">eh?</h3>
</div>

</div><!--end center-->

Almost working but can't see why I'm getting an unwanted white space between image and caption as here:



Any CSS experts see why? Cheers!

PS "Solutions" I've found online don't work, display:block; screws things up totally, setting background-size, border, padding, margin etc make no difference.