Re: IE 5/Win: "moving" margins

IE 5/Win: "moving" margins

The Challenge

To use CSS, leaving the markup intact, to simulate a compliant browser's rendering of two Ps with top and bottom margins, and placed inside of DIVs in IE 5.0. For well-written and illustrated examples, see Marek Prokop's Moving Margins.

NOTE: in Mozilla/IE6/NS6, all of the examples below should be rendered correctly. For optimal viewing, please use a buggy browser :)

Here is the original markup with the original CSS:

See the gap between the two colored DIVs? If you have read Marek's write-up, you would know that it comes from the margin on the Ps spilling out of the DIVs.

Suggested Solution

Assume that the margins on the Ps are essential. Set a width for the DIVs, for example 100%:

Another DIV -- another... solution!

How about if we wrap this in a wrapper DIV with a padding of 1 em, and set the margin of the inner Ps to 0?

The padding of the wrapper DIV does not intrude into the inner DIVs. I believe this is the desired effect.

ta-dah! by Micah Sittig in xhtml and css, last updated 2002.06.12

I know it doesn't validate, but in-document style declarations are more convenient when reading the code!