Units
When setting the size of things, there are many options in CSS, including inches, centimeters, pixels, ems, and other units. The most commonly-used are em, %, and px (pixels).
An "em" is defined as "the width of a square or nearly square piece of type, used as a unit of measure for matter set in that size of type" (American Heritage Dictionary, 4th edition). The definition of "em" is in some ways even more confusing than the term itself, but I've also heard it explained as "the size of the letter M in a particular font." I'm not sure if the latter definition is entirely accurate, but the key point to remember is that "ems" are relative to the size of the font, whereas units such as pixels or inches or centimeters are not.
| Unit | Brief Explanation | When to Use |
|---|---|---|
| em | Relative to font size | Use em when you want to be able to enlarge or shrink items
as you enlarge or shrink the font. |
| % | Relative to the container | Use % when you want items to resize in proportion to the size
of the browser window, which means that areas will shrink or grow as you shrink
or enlarge your browser window. An item with a width of 50% would be half
the width of the browser window. If an item inside the first item also has
width set to 50%, the second item will actually be 25% of the total width
of the browser window (because it is 50% of the container, which is already
at 50%). |
| px | Relative to the size and resolution of the monitor | Don't use px unless you absolutely have to. The trouble
with pixel-based measurements is that users may not be able to resize the
items in when resizing fonts or their browser window. This can be bad for
accessibility. Sometimes it is acceptable use pixels for things like borders,
though borders can be set using other units also, such as ems. |
NOTE: I did not finish writing all of the content that I wanted to in some of the sections below, but I'm providing links to resources that explain these concepts. I may fill in these sections later when I get the time.
See also: http://www.w3schools.com/css/css_dimension.asp
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.