Let me explain what's happening:
One issue that is occurring is Margin Collapsing. After reading through Jeroen's answer and checking out the W3C box model specs for collapsing margins, I was left with a headache and still had questions about borders (as Oded originally brought up). Luckily, I stumbled upon this helpful article where I was able to piece together a solution (specifically focusing on top margins, although this same concept applies to bottom margins as well).
When two [block-level] elements have touching vertical margins, the larger margin takes precedence while the smaller one is discarded.
In your code, every element is considered a block-level element, including the <html> and <body> tags.
The <body> has a default margin-top of 8px within its parent <html> element.
The first <p> tag defaults to a margin-top of 16px.
It's essential to note that margin collapsing doesn't just apply to sibling elements, but also extends to parent elements. So, the <p> tag starts comparing against its parent tag's position and margins.
The #child element has a margin-top of 0. Since the <p> top margin touches the #child top margin, they collapse into a single 16px margin (since 16 is greater than 0). This means the <p> tag's 16px margin acts as a margin for the #child tag.
The margin from the <p> tag continues to check for margins directly above it. Next in line would be the #parent tag, which also maintains a margin-top of 0.
However, the presence of a 1px border on #parent prevents the <p> from extending further upwards. Due to the 1px border, the <p> stops at this point since there are no more margins to come across, effectively halting the collapsing within the top border of #parent.
The result is a rendering where the #parent box appears 32px taller than the #child box: The <p> margins "break through" until encountering a non-margin element, such as the 1px border. What if the 1px border on #parent wasn't present to halt the collapsing?
In situations like these, it's important to follow the steps outlined and understand how each element interacts with the margins above them. By grasping this concept, you can better comprehend layout discrepancies and why certain elements render the way they do.
Additional Note:
If you're looking for more in-depth information, I highly recommend reading through the referenced article. Not only does it provide valuable insights for solving similar issues, but it also sheds light on quirks like IE7 not participating in border collapsing within the <body> tag, offering further clarity on these concepts.