Closing the gap between img and caption

HTML & CSS
1

I am using the following code to place an image with a caption on my page… How do I reduce the space between the two. I want to move the caption close to the photo.

<table align=“right”>
<tr>

<td>
<img src=“images/Stephan.jpg” width=“300” height=“200”>
</td>

</tr>

<td>
<center><b><font color=“#8A360F”>The Stephaniturm</font></center>
</td>

        &lt;/tr&gt;
        &lt;/table&gt;
2

We would need to see matching CSS…

OR, if you don’t mind changing your markup, you could put the IMG AND the markup in the same TD.

So the NEW code would be:


<table align="right">
<tr>
<td class='imgAndCapt'>
<img src="images/Stephan.jpg" width="300" height="200">
 <b>The Stephaniturm</b>
</td>
</tr>
</table>

and the NEW CSS


.imgAndCapt{text-align:center;}
 .imgAndCapt b {color: #8A360F; display:block;  
      margin-top: 15px ; /*change the value to what ever  spacing you want to put between the caption and image */
}

hope that helps

3

That did the job…thanks very much. I appreciate it. Would have been embarrassed to put up my code. You guys are always there to help, and I appreciate it.

4

You are welcome. and never be embarrassed, B… We are happy to help.