Margins - collapsing

Collapsing margins are useful - can be fidly and annoying
remember - margins are outside borders, padding is inside borders

p{
margin:0;
padding:1em 0;
(margin? - inserted 1em of padding for each p element - adding border below shows this)
border:1px dotted pink;
}
Try
p{
margin:1em 0;
padding:1em 0;
(margin collapses - margin moves up until it touches the border of the other - they overlap until one margin touches edge of the border of the other element)
border:1px dotted pink;
#two {
margin-top:2em; (will extend until it touches the border of previous element - the area inside the border are solid objects - around that the margin creates a shield - shield of one element cannot go into a solid object, but the two margins can overlap)
}
/style>
/head>
body>
p>During the first Internet boom, the most common business model was
probably, "get a ton of traffic, then figure out how to make money" /p>
p id="two">During the first Internet boom, the most common business model was
probably, "get a ton of traffic, then figure out how to make money" /p>
p>During the first Internet boom, the most common business model was
probably, "get a ton of traffic, then figure out how to make money" /p>
p>During the first Internet boom, the most common business model was
probably, "get a ton of traffic, then figure out how to make money" /p>
/body>