problem with margins

[oboedrew]

Hello, everyone. I'm relatively new to xhtml/css and I'm running into a problem with margins.

Here is the relevant code:

XHTML:

<div id="mp3s">

<p>Testing</p>

<a href="testing.mp3"><img src="mp3icon.gif" /></a>

<p>More Testing</p>

<a href="moretesting.mp3"><img src="mp3icon.gif" /></a>

</div>


CSS:

div#mp3s

{position: relative; top: 80px; margin: auto;
letter-spacing: 1px; word-spacing: 1px;
font-size: 20px; font-family: "times new roman", times, serif}

div#mp3s a
{margin: 0 auto 20px}


This is from a page of my website where I plan to make some mp3's of my music available. Underneath the name of each song is an icon that acts as the link to that song. The problem is, right now, there is an equal amount of space between the each song title and icon. I want to set it up with a little extra space between the bottom of one icon and the top of the next song title, just so it looks less cluttered and so that it's easy to tell that the links/icons correspond to the song titles ABOVE them, not below.

I thought I would be able to achieve this by changing the margins as shown at the bottom of the CSS sampled above. But when I view it in my browser, no matter what I set as the margins of "div#mp3s a," the appearance on screen does not change.

Can someone explain what I'm missing here? I would be most open to any suggestions, as I've only been studying XHTML/CSS about a week, so I'm sure there are things I'm doing that could be done more effectively and/or efficiently another way.

Thanks,
Drew

[aeroweb99]

I am probably going to get a bad rap for saying this but.....Have you thought about putting all these in a table? If you have a lot of them and the spaces and things need to be uniform, then a table would do the trick. Not for your page layout, but for that data. Tables can actually be useful and in my opinion this would be one of those times.
Now having said that, I have a similar situation where I need a button below an image and a little extra space before the one below it to distinguish, just like you said. What I did was float some divs next to each other in a column type layout. Put my padding in.
Start with your <p> tag, But close it after the link below, not before it. Put a </br> tag in between.
Example:

<p>testing</br>
<a href...><img.../></a>
</p>

<p>more testing</br>
<a href...><img.../></a>
</p>

This will put more space between your items. So there's 2 ways to do it and there are more but don't make it more complicated than it has to be.