Widths and margins of inline, replaced elements

The first squirrel, [Squirrel Image], the second squirrel, [Squirrel Image], the third squirrel, [Squirrel Image], the fourth squirrel, [Squirrel Image], and the fifth squirrel, [Squirrel Image], should be in the normal flow of the text at normal size.

The sixth squirrel, [Squirrel Image], should be scaled to a width of 20% of its parent (the paragraph, which is almost the width of the page). The seventh squirrel, [Squirrel Image], should have 2em of space on its left (as margin) and 30px on its right. The eighth squirrel, [Squirrel Image], should be shifted to the left by 10px without moving any of the text around it. The ninth squirrel, [Squirrel Image], should be shifted to the right by .5em. Around the tenth squirrel, [Squirrel Image], there should be 10px of space on both sides (unless it hits a line break; it is displaced 10px to the left and has a 20px left margin). Around the eleventh squirrel, [Squirrel Image], there should be 10px of space on both sides (unless it hits a line break; it is displaced 10px to the right and has a 20px right margin). Around the twelfth squirrel, [Squirrel Image], there should be 10px of space on both sides (unless it hits a line break; it is displaced 10px to the left and has a 20px left margin). Around the thirteenth squirrel, [Squirrel Image], there should be 10px of space on both sides (unless it hits a line break; it is displaced 10px to the left and has a 20px left margin). Around the fourteenth squirrel, [Squirrel Image], there should be 10px of space on both sides (unless it hits a line break; it is displaced 10px to the right and has a 20px right margin). Finally, the fifteenth squirrel, [Squirrel Image], should be displaced 10px to the left, and the sixteenth squirrel, [Squirrel Image], should be displaced 10px to the right.


Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org