Example: Units compared - An Inquiry Into Values - HTML with Style

An Inquiry Into Values

Example: Units compared

This document shows the various units in action. There are seven paragraphs in each section, and each has an indent specified in a different unit. All indents except for the last one in each section are equal to 1 inch. The absolute units used are set at the correct values to be equal (1 inch = 2.54 cm = 25.4 mm = 72pt = 6pc). The relative values for em and ex are different for each section, but are also equal to an inch (12em = 12 × 6pt = 6em = 6 × 12pt = 4em = 4 × 18pt = 72pt = 1in). The pixel measurements cannot be set to exactly one inch (unless you happen to have a display with exactly 100dpi resolution), which is an example of the weakness of this unit.

Normally, the ex values should not be equal to an inch, but both Explorer and Navigator set an ex to be equal to half an em, rendering the value slightly useless. Also, you'll notice that Navigator doesn't quite get the em and ex values right; another case of Navigator inheriting actual values instead of computed values, most probably.

BODY {
 background-color: black;
 color: white;
}
DIV.six P {
 font-size: 6pt;
}
DIV.twelve P {
 font-size: 12pt;
}
DIV.eighteen P {
 font-size: 18pt;
}
P.blurb {
 color: black;
 font-size: medium !important;
}
P {
 margin: 0.1cm;
}
DIV {
 background-color: white;
 border: solid 2px black;
}
SPAN {
 background-color: #888;
}

<DIV CLASS="six">
<P CLASS="blurb">Absolute and relative units with 6pt text:</P>
<P STYLE="text-indent: 25.4mm"><SPAN>This is a paragraph with 25.4mm of
indent.</SPAN></P>
<P STYLE="text-indent: 2.54cm"><SPAN>This is a paragraph with 2.54cm of
indent.</SPAN></P>
<P STYLE="text-indent: 1in"><SPAN>This is a paragraph with 1in of
indent.</SPAN></P>
<P STYLE="text-indent: 72pt"><SPAN>This is a paragraph with 72pt of
indent.</SPAN></P>
<P STYLE="text-indent: 6pc"><SPAN>This is a paragraph with 6pc of
indent.</SPAN></P>
<P STYLE="text-indent: 12em"><SPAN>This is a paragraph with 12em of
indent.</SPAN></P>
<P STYLE="text-indent: 24ex"><SPAN>This is a paragraph with 24ex of
indent.</SPAN></P>
<P STYLE="text-indent: 100px"><SPAN>This is a paragraph with 100px of
indent.</SPAN></P>
</DIV>
<DIV CLASS="twelve">
<P CLASS="blurb">Absolute and relative units with 12pt text:</P>
<P STYLE="text-indent: 25.4mm"><SPAN>This is a paragraph with 25.4mm of
indent.</SPAN></P>
<P STYLE="text-indent: 2.54cm"><SPAN>This is a paragraph with 2.54cm of
indent.</SPAN></P>
<P STYLE="text-indent: 1in"><SPAN>This is a paragraph with 1in of
indent.</SPAN></P>
<P STYLE="text-indent: 72pt"><SPAN>This is a paragraph with 72pt of
indent.</SPAN></P>
<P STYLE="text-indent: 6pc"><SPAN>This is a paragraph with 6pc of
indent.</SPAN></P>
<P STYLE="text-indent: 6em"><SPAN>This is a paragraph with 6em of
indent.</SPAN></P>
<P STYLE="text-indent: 12ex"><SPAN>This is a paragraph with 12ex of
indent.</SPAN></P>
<P STYLE="text-indent: 100px"><SPAN>This is a paragraph with 100px of
indent.</SPAN></P>
</DIV>
<DIV CLASS="eighteen">
<P CLASS="blurb">Absolute and relative units with 12pt text:</P>
<P STYLE="text-indent: 25.4mm"><SPAN>This is a paragraph with 25.4mm of
indent.</SPAN></P>
<P STYLE="text-indent: 2.54cm"><SPAN>This is a paragraph with 2.54cm of
indent.</SPAN></P>
<P STYLE="text-indent: 1in"><SPAN>This is a paragraph with 1in of
indent.</SPAN></P>
<P STYLE="text-indent: 72pt"><SPAN>This is a paragraph with 72pt of
indent.</SPAN></P>
<P STYLE="text-indent: 6pc"><SPAN>This is a paragraph with 6pc of
indent.</SPAN></P>
<P STYLE="text-indent: 4em"><SPAN>This is a paragraph with 4em of
indent.</SPAN></P>
<P STYLE="text-indent: 8ex"><SPAN>This is a paragraph with 8ex of
indent.</SPAN></P>
<P STYLE="text-indent: 100px"><SPAN>This is a paragraph with 100px of
indent.</SPAN></P>
</DIV>

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial8/
Created: Oct 30, 1998
Revised: Nov 4, 1998