Lesson 3: Working with CSS properties CHAPTER 4 175
■■pt An absolute measurement point unit, 72 points per inch
■■pc An absolute measurement pica unit, 12 points per pica
■■in An absolute measurement inch unit
■■mm An absolute measurement millimeter unit
■■cm An absolute measurement centimeter unit
There is also a set of absolute sizes whose size is controlled by the browser, but the recom-
mended size is 1.2 em from the previous size. These sizes are xx-small, x-small, small, medium,
large, x-large, and xx-large.
Similar to this, there is a set of relative sizes whose size is based on the parent element’s
size. These sizes are larger and smaller.
In addition to all the sizes already covered, you can use percentage values to size your
font, which provides a size that’s relative to the parent element’s computed font size.
Here are some examples of using the various measurement units to set the font-size
property.
h1 { font-size: 12px; }
h1 { font-size: 200%; }
h1 { font-size: 1.2em; }
h1 { font-size: 1in; }
h1 { font-size: 2cm; }With all these measurement choices, what is the recommended measurement unit to use?
For screen rendering, try to use the em or percentage measurements because these measure-
ments scale well. For printer rendering, consider using any of the absolute font measurements
such as point, pixels, picas, inches, centimeters, or millimeters.Working with the CSS box model
Creating a nice layout for your webpage requires you to understand the CSS box model,
which defines the spacing around boxes in your HTML document, as shown in Figure 4-10.
The margin is the space outside the border, between the border and the next element. The
padding is the space inside the border, between the border and the content. If the border is
being displayed, the margin and padding settings will have distinct effects. If the border is
not being displayed, it can be difficult to differentiate margin and padding settings.