How to get rid of this sliver of white between DIVs?

Question

I am currently having trouble getting rid of a sliver of white...

Here is an example page: http://m.stackoverflow.quickmediasolutions.com/view_question.php?id=97969&site=serverfault

As you can see, the answers have a sliver of white stuffed between the top of the 'button' and the content.

Here is some relevant code:

<!-- this is the top of the 'button' -->
<div class='top'></div>

<!-- right here is where the space is -->
<div class='content'></div>

.top {
    height: 5px;
}
.content {
    display: block;
    padding-left: 10px;
}

Edit: this problem is fixed now and I will accept the answer below shortly.

Answer 1

This looks like native margin the <p> element has:

.question p { margin: 0 }

A relevant tip here it to use a CSS-Reset, it eliminates most of these oddities and cross-browser compatibility issues.

Answer 2

you know, you'd be surprised how often whitespace breaks layout. I found out the hard way.

Just for $hits and giggles write it out together and see what happens:

<div class='top'></div><div class='content'></div>

and of course I would make sure that in your css you define margin:0px; for both divs