RichInStyle.com test pages: boxes - block widths

Auto test

Block non-replaced elements

In each of the following cases, although the width is 50%, due to the border, the elements should 'overlap' in the middle.

This element should be centered (the element - NOT the content) because it has margin: auto and width: 50%.

This element should be right-aligned (the element - NOT the content) because it has margin-left: auto and margin-right: 0.

This element should be left-aligned (the element - NOT the content) because it has margin-left: 0 and margin-right: auto.

This element should look identical because it is over-constrained and therefore the margin-right: 1000% will be ignored and the effect will be the same as margin-right: auto.

Block replaced elements

This image should behave like a block element for the following test to be valid (i.e., it should be preceded and followed by a line break): Followed by one?

If that was correctly treated, here are some tests:

The example above should look exactly the same as normal because it has margin-left: 0; margin-right: auto, and since the width of replaced elements is not implied but intrinsic, no difference should be observed.

This image should be normal size but right-aligned:

This image should be smaller and right-aligned (width specified via CSS):

This image should be smaller and right-aligned (width specified via HTML):

This image should not be right-aligned because text-align only affects inline content: