unexplainable space between two divs

OK, I have two divs and one is on top of the other. I keep getting a space between the two and I can't explain why. Here is the CSS for the first div:

div.top
{
	background-image:url('images/top.jpg');
	background-repeat:no-repeat;
	height:88px;
	margin-left: 100px;
	margin-right: 100px;
	margin-bottom:0px;
	padding-bottom:0px;
}

HTML:

here are the containers that this div is found within (listed parent to child):

div.container
{ 
	background-image: url('images/background.jpg');
	background-attachment:fixed;
	background-repeat:repeat; 
	min-height: 2000px;
}

div.center
{
	margin-left: 20%;
	margin-right: 20%;
	width: 770px;
	background-color:#FFF;
}

div.text
{
	background-color:#FFF;
	font-family:Times, serif;
	font-size:14px;
	margin-left: 30px;
	margin-right:30px;

}

HTML:

Now the second div, which is right below the first div is this (I included all the styles for the elements within the div as well:

div.middle
{
	background-image:url('images/center.jpg');
	background-repeat: repeat-y;
	min-height:200px;
	margin-left: 100px;
	margin-right: 100px;
	margin-top:0px;
	padding-top:0px;
}

div.middle p
{
	padding-top:20px;
	padding-right:100px;
	padding-left:100px;
	font-size:18px;
	text-align:left;
}


div.middle p.sig
{
	font-size:18px;
	text-align: center;
	padding:0;
	margin:0;
}

HTML:

The HTML is (notice there is also another DIV below the first two DIVS I just explained):

<div class="top">
</div>
<div class="middle">
<p>"Text here Text here Text here Text here Text here Text here Text here!"
</p>
<p class="sig">- Text here
<br />
<a href="http://www.website.com">website.com</a>
</p>
<img src="images/avatar6.jpg" />
</div>
<div class="bottom">
</div>

HTML:

What happens is -- and I can't figure out why for the death of me -- there is a space between the top and middle div. I made sure there is no bottom margin or bottom padding for the top div and I made sure there was no top margin or top padding for the middle div. There is just a space there and I can't explain why! I checked out the space with the firefox web developer toolbar and it appears there is no margin or padding there that is preventing the middle div from being flush with the top div. There is just a space there that is unexplainable!

So I tried floating the middle div left and it became flush with the top div ... only problem is that when I do that, I lose the bottom div -- it just disapears!

I would appreciate if anyone could help me with this because I have been stuck on this problem for quite a while now ...

 

I am pretty sure it's the <p> tags. Remove all of the paragraph tags then try.

 

Oh, figured it out. I had to reset the top margin on the p tag. Thanks mate.