TThis div has 20px of padding, 30px border that is solid and yellow, and 0px margin

Notice that the text doesn't touch the border like it does in the two divs below. This is because it has 20px of padding which separates content from borders.

This div has a 10px dotted white border, default padding and 0px margin;

This div touches the div above because both have 0 margin, but doesn't touch the div below because the div below has a 20px margin. It also doesn't quite touch the top or left because the body has a default margin.

This div has a 5 px double blue border, and 20 px margin. Because of the margin the box is moved away from the left of the screen and away from the bottom of the div above.