[nabsltd]

Originally Posted by foosion

I don't understand how the difference works for things such as p and h1 with pure text (no borders, decoration, etc.). When I compare, for example, "margin: 1em" to "padding: 1em" in a p or h1 definition, the padding takes up a bit more space. Why is this?

This could just be a quirk of that particular renderer. Testing more renderers might help.

Other than the inside/outside part, the biggest difference between margins and padding is that margins collapse and padding does not. An example:

.p1 {
margin-top: 1em;
margin-bottom: 1em;
}

.p2 {
padding-top: 1em;
padding-bottom: 1em;
}

Consecutive paragraphs of class p1 will have 1em of space between them, while consecutive paragraphs of class p2 will have 2em of space. This is because margins collapse to the larger of the two shared margin values.