This is a p in a div. The
div has a yellow background and a purple
border, and 1em of padding. The p has
1em margin, 1em green border, and 2em padding. Therefore
around the edges of the p (which has room for
exactly 6 lines of text), you should see 2em of
aqua, 1em of green, 2em of yellow, and 2em of purple.
This is a p in a div,
floating right. The div has a yellow
background and a purple border, and 1em of padding.
The p has 1em margin, 1em green border,
and 2em padding, and a width of 50%. Therefore around
the top, left, and bottom edges of the p
(which has room for exactly 12 lines of text),
you should see 2em of aqua, 1em of green, 2em of
yellow, and 2em of purple. The width of the text
inside the p should be half the width of
the box that is in the middle of the yellow stripe.
This is a p in a div,
floating left. The div has a yellow
background and a purple border, and 1em of padding.
The p has 1em margin, 1em green border,
and 2em padding, and a width of 50%. Therefore around
the top and right edges of the p
(which has room for exactly 10 lines of text),
you should see 2em of aqua, 1em of green, 2em of
yellow, and 2em of purple. The width of the text
inside the p should be half the width of
the box that is in the middle of the yellow stripe.
The bottom of the p should stick out of
its container so that its bottom border is even with
the bottom of the outer purple border.
(Back to CSS Testing Information, David Baron)