<p> margins affecting margins of parent container (collapsing margins)

Why does the P tag within the div affect the margin of the div? Shouldn't the div rest right underneath the div directly above it?

Date Created: 3rd October 2006
Date Modified: 3rd October 2006

Home > HTML > p-tag margins

Testing WebmasterWorld HTML Forum:
http://www.webmasterworld.com/css/3079292.htm

Simple example to illustrate my question. Why does the P tag within the div affect the margin of the div? Shouldn't the div rest right underneath the div directly above it?

Shouldn't the div have extra padding around the p tag, not the margin outside the div.

[TD 1] Here is some regular table text

[TD 1 - P 1] Here is some paragraph table text

[TD 1 - P 2] Here is some paragraph text

[DIV 1] Here is some regular div text

[DIV 2 - P 1] Here is some paragraph div text. You would reasonably expect this DIV to be immediately below the DIV above. In fact if you add padding:1px; (or a border) to the DIV, it is!!

[DIV 1] Here is some regular div text

[DIV 2 - P 1] Here is some paragraph div text - same as above. Except this has padding:1px; added to the containing DIV - see no gap! (A border is also added for effect)

The problem is collapsing margins.

[Home]