I have encountered a strange issue while trying to ensure that two elements remain consistently 100 pixels apart in my code. Despite having no errors, the margin-bottom on the P tag is set to 50 pixels and the margin-top on a DIV below it is also set to 50 pixels.
Instead of maintaining a total separation of 100px as intended, they are only 50 pixels apart. I cannot seem to locate the source of this discrepancy. There are no floats present on the page, ruling out a clearing issue. Additionally, both the HTML and CSS have been successfully validated.
This unexpected behavior occurs across both the latest versions of Chrome and FIrefox 3.6 browsers.
Below is an excerpt from my code:
#content p {
margin-bottom: 50px;
}
#content #posted {
border-top: 1px dotted #ccc;
line-height: 20px;
margin-top: 50px;
}