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.
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.)
div.
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.)
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.
(Back to CSS Testing Information, David Baron)