Cascading Style Sheets/Lengths and Units
To specify widths, heights and other lengths, you can use various units, listed in the following table.
| Code | Definition | Example (1 unit) |
|---|---|---|
| em | The height of the element's font. | |
| rem | The height of the browser font size. | |
| ex | The height of the letter 'x' in the element's font. | |
| px | pixel | |
| mm | millimeter | |
| cm | centimeter | |
| pt | point (1/72 inch) | |
| pc | pica (12 points = 1/6 inch) | |
| in | inch | |
| vw | 1/100 of a viewport's width | |
| vh | 1/100 of a viewport's height |
Lengths may also be specified as a percentage of another length. Using percentages can be complicated because the base length varies from property to property. For example, when percentages are used with the margin property the calculation is based on the width of the containing block. When percentages are used with the font-size property the calculation is based on the font-size of the parent element but with line-height it is based on the font-size of the current element.
Font sizes on screen are best given as a percentage or in ems. (See the note on Using ems in Internet Explorer.) This means that the page will interact gracefully with users' font preferences. Using pixels (px) for font sizes causes a number of problems and should be avoided.
The absolute units mm, cm, pt, pc and in do not work well on screen and cause problems in many older browsers. It is safest to only use them for print media. Even in print media they may interact badly with users' preferences.
Relative units
[edit | edit source]The three units em, ex and px are called relative units. These units do not specify a fixed length. Instead they scale relative to some other quantity. In the case of em and ex they scale relative to the font size of some element.
Screen pixels, printer pixels and CSS pixels
[edit | edit source]The px unit specifies a length in CSS pixels. These are not the same as the pixels on the screen that the document is rendered on or the dots on the printer that it is printed on. It is perfectly possible, for example, for there to be two screen pixels or five printer dots to one CSS pixel. Many web browsers use the rule that one screen pixel equals one CSS pixel for simplicity but you can not rely on this. Opera and Internet Explorer version 7 allow the user to change the number of screen pixels per CSS pixel. It is common for users with poor vision who use these browsers to choose to have five or six screen pixels to the CSS pixel.
The formal definition of the CSS pixel is quite complicated but the basic idea is that a CSS pixel appears to be the same size when the document is at a comfortable reading distance. So a CSS pixel would be physically bigger on a monitor than on a mobile phone because the monitor would normally be further from the user's eyes than the mobile phone.
Calculations
[edit | edit source]Divide the desired margin width/height by the width/height of its container to convert it to ems. Multiply by 100 to convert that to percentages.
Divide the desired container width by 1.62 to use the Golden Ratio as the size of the content block. Subtract the content width from the container width to use the Golden Ratio as the size of the sidebar