<p>padding or margin?

[SniperX]

I have the following CSS code.

.skinbox {
width: 530px;
height:500px;
text-align: left;
font-size: 11px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: #FFFFFF;
float:left;
}

.skinbox a:link, .skinbox a:visited, .skinbox a:active{
text-align: left;
color: #D95D0D;
}

.skinbox p{
color: #000000;
padding-top: 10px;
}

.skinbox img{
border: 0px;
margin-right: 10px;
}

It appears to work perfectly in Firefox (producing a 10px pad above the paragraph (Contained within the .skinbox class.) as I would expect it to.

However, in IE and Opera, the padding appears to be more like to to 40px.

Why is this and how can I resolve it.

.skinbox {
width: 530px;
height:500px;
text-align: left;
font-size: 11px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: #FFFFFF;
float:left;
}

.skinbox a:link, .skinbox a:visited, .skinbox a:active{
text-align: left;
color: #D95D0D;
}

.skinbox p{
color: #000000;
padding-top: 10px;
}

.skinbox img{
border: 0px;
margin-right: 10px;
}

Many thanks in advance.

[edited by: SuzyUK at 12:22 am (utc) on July 2, 2004]
[edit reason] see TOS and Forum Charter, thanks.. [/edit]

[SniperX]

Sorry, I meant to add this in the prev post.

The calling code:

<div class="skinbox">
<div class="skintitle">
<h2>Watermelon for Invision Power Board 1.3.</h2>
</div>
<a href='/forums/index.php?act=gal&amp;code=00&amp;cat=10'>
<img src='/skins/images/thumbs/watermelon1.jpg' alt='Watermelon Category Skin' width='152' height='120' align='left' /></a>
<a href='/forums/index.php?act=gal&amp;code=00&amp;cat=10'>
<img src='/skins/images/thumbs/watermelon2.jpg' alt='Watermelon PM Skin' width='152' height='120' align='left' /></a>
<div style="clear: both"></div>
<p><a href="/cpg/thumbnails.php?album=2" title="View Screenshots">Screenshots</a>
&nbsp;&middot;&nbsp;<a href="/forums/index.php?download=29" title="Download This Skin">Download</a>
&nbsp;&middot;&nbsp;<a href="/forums/index.php?showforum=81" title="Support Forum">Support Forum</a></p>
</div>

[iamlost]

There is an underlying problem that is eluding me. I think it is the <a> surrounding the <img> but unable to isolate.

However:

1. Opera and IE are including a margin on the <p>.
   Solution: Add margin: 0; to .skinbox p.
   
2. Opera and IE appear to be passing the <h2> bottom margin to between the <img>s and the <p> ... and I have no idea why ... unless related to my initial comment.
   (to see this add h2 {margin 20px 0;} to your CSS and change the 20px to 10 or 30 and see what happens)
   Solution: Add h2 {margin: 0; padding: 10px 0;} to your CSS. Adjust padding to suit to replace default margin.