CSS: vertical margin??

　I will write about my recent html&css work which puzzled me a lot.

I want the margin above and bellow the red text equal.

　There are pictures and information of the persons. After clearing the float, “See all message from XXXXX” should be placed. I wanted the margin above and bellow of the read text EQUAL! I made the code like this (from the picture part to dividing border);

<div class="individuals">
	<div class="repName">
		<img src="img/picture.jpg">
		<p><span>Firstname Surname</span><br>Executive Editor<br>Company</p>
	</div>
	<p class="allDetails"><a href="#">&gt;&gt; See all messages form XXXXX</a></p>
</div>

.individuals{
width: 360px;
margin-top: 15px;
margin-bottom: 10px;
border-bottom: 1px dotted #ccc;
}
 
.repName{
width: 220px;
}
 
.repName img{
width: 60px;
height: 60px;
float: left;
margin-right: 10px;
}
 
.repName span{
font-weight: bold;
}
 
.repName p{
width: 100px;
margin-top: 0;
margin-bottom: 0;
float: left;
}
 
p.allDetails{
clear: both;
padding-top: 15px;
padding-bottom: 15px;
}

　Actually there are more floating parts but same rendering is occurred with this code. The result of rendering is like this;

Internet Exproper 7

IE8,Fairefos, Safari

The top and bottom spaces of “See all message from XXXXX” are different from IE7 and the others (Firefox, IE8, Safari). I don’t know why. But at all events, they are not what I want. The space should be equal between top margin and bottom margin.

I suspected the margin setting of the class name individuals. So, I added margin: 0; to the class name p.allDetails which define the style of “See all message from XXXXX” . Yes! Now you see the same result as the ideal A on all browsers(IE7, IE8, Firefox, Safari).

To tell the truth, I didn’t put margin: 0; to p.allDetails at the moment. I changed the
p tag to div tag like this:

<div class="allDetails"><a href="#">&gt;&gt; See all messages form XXXXX</a></div>

In this case you don’t need margin: 0; as it should be in p.allDetails. Right?