CSS inherit Test

BODY	{
	color: red;
	padding: 0;
	margin: 0;
	}

P	{
	color: black;
	}

P.two	{
	color: inherit;
	}

DIV.three {
	margin-left: 5em;
	padding: 0;
	background-color: #CCC;
	color: black;
	}

P.three {
	font-size: 2em;
	}

P.three, P.four {
	margin-left: inherit;
	}

DIV.four {
	width: 80%;
	margin-right: 5%;
	margin-left: auto;
	padding: 0;
	background-color: #CCC;
	color: black;
	}

DIV.five {
    margin: 20%;
	border: medium solid green;
	width: auto;
	}

P.five {
	margin: 20%;
	width: inherit;
	border: medium solid purple;
	}

The header and the styles should be red, but this text should be black. For information on the inherit property, see the relevant section of the CSS2 Specs.

However, this text should be red again.

This div has a margin-left of 5em, which is five times its font size.

This is a paragraph inside the div, and its margin-left has been set to inherit, but it has double the font-size of the div. Since the computed value should be inherited, the margin-left of this p should be the same as the margin of the div. (Note that the margin of the p is inside the div.)

This is more text in the div.
This div has a margin-left of auto, a width of 80%, and a margin-right of 5%. This means its margin-left should be 15% of the width of the body of this page.

This is a paragraph inside the div, and its margin-left has been set to inherit. Since the computed value should be inherited, the margin-left of this p should be the same as the margin of the div. (Note that the margin of the p is inside the div.)

This is more text in the div.

This is a p element with a purple border and with width: inherit, and it should overflow out of the right edge of its parent (which has a green border), since the width inherits the computed value and the margins thus make the outer width bigger than the (inner) width of the parent.


Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org