Cascading Style Sheets/Lengths and Units

To specify widths, heights and other lengths, you can use various units, listed in the following table.

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 property the calculation is based on the width of the containing block. When percentages are used with the property the calculation is based on the  of the parent element but with  it is based on the  of the current element.

Font sizes on screen are best given as a percentage or in s. (See the note on Using ems in Internet Explorer.) This means that the page will interact gracefully with users' font preferences. Using pixels for font sizes causes a number of problems and should be avoided.

The absolute units,  ,  ,   and   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
The three units,   and   are called relative units. These units do not specify a fixed length. Instead they scale relative to some other quantity. In the case of  and   they scale relative to the font size of some element.

Screen pixels, printer pixels and CSS pixels
The  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
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

de:Websiteentwicklung: CSS: Schriftgröße CSS/Unità di misura, ereditarietà e box model CSS/Jednostki miary