To illustrate the issue, I've created two HTML pages:
They are both exactly the same, with one exception. On the first page, the div class="topbox" has a padding of 1px. On the second page, the padding has been set to 0.
If you look at these two pages in Firefox 3.5+ on Mac and Windows (including Firefox 5), you'll see that div class="topbox" on the second page suddenly has the same top margin as the div class="bottombox" even though div class="topbox" is specified a top margin of 0. In fact, when I change the top margin of "bottombox" the top margin of "topbox" changes accordingly.
No other browser exhibits this problem. I've tried it on Chrome, Safari, IE8 -- even bumbling ol' IE7 doesn't add that extra margin at the top of div class="topbox".
Is this a well-known issue in Firefox? I've looked on Google and on DaniWeb and I haven't been able to find any mention of this specific issue. And can anyone suggest a solution or workaround for when I don't want any padding in div class="topbox"?