Widths and margins of block-level, replaced elements

This image should be normal, and left justified, on its own line (as should all the images on this page, since image has been set to have display block):

[Squirrel Image]

This image should look just like the last one:

[Squirrel Image]

As should this one:

[Squirrel Image]

and this one:

[Squirrel Image]

This image should be 50px to the right of being centered in the div

[Squirrel Image]

This image should be 50px from the left edge

[Squirrel Image]

This image should extend 50px outside the right edge, and be 30% the width of the div

[Squirrel Image]

This should extend 50px outside the right edge:

[Squirrel Image]

This should be the whole width of the div, displaced 50px to the right:

[Squirrel Image]

This should extend 30px outside the left border:

[Squirrel Image]

as should this one:

[Squirrel Image]

and this one:

[Squirrel Image]

This should be 80px left of being centered in the div

[Squirrel Image]

This should be 30px inside the right border:

[Squirrel Image]

This should extend 30px outside the left border:

[Squirrel Image]

This should be centered within the div:

[Squirrel Image]

This should be 50px inside the left edge:

[Squirrel Image]

as should this:

[Squirrel Image]

Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org