A normal paragraph. Nothing really exciting about it besides having a one-em margin all the way around (that's why it doesn't go all the way to the dotted border).
A paragraph with a class
of one
. This element therefore has negative left and right margins, and so will be "pulled out" of its parent element. Its lack of top and bottom margins may also cause overlap with the following paragraph, which has negative top and bottom margins.
A paragraph with a class
of two
. This element therefore has neagtive top and bottom margins. This will cause it to be "pulled upward" and overlap the element before it, and also "pull up" the following paragraph to overlap this one. Since the following paragraph has a margin, however, the content will not overlap. The negative bottom margin of this paragraph and the positive top margin of the following paragraph will cause the following element's top margin to overlap this one. Therefore their border edges will end up touching.
Another normal paragraph. Nothing really exciting about it besides having a one-em margin all the way around.