Revision 8089 of "Panjang dan Unit" on mswikibooks

{{Prognav|Lembaran Gaya Lata|Mentakrif Peraturan Gaya|Pemilih}}

Bagi menetapkan lebar, tinggi dan ukuran lain, kita dapat menggunakan pelbagai unit seperti yang tersenarai dalam jadual berikut.

<!-- Nota: peratusan bukan unit. -->
{| class="wikitable"
|+ Unit dalam CSS
! Kod
! Definisi
! Nota
|-
| em
| Ketinggian fon sesuatu unsur.
|
|-
| ex
| Ketinggian huruf 'x' dalam fon unsur.
|
|-
| px
| piksel
|
|-
| mm
| milimeter
|
|-
| cm
| sentimeter
|
|-
| pt
| titik ("point", 1/72 inci)
|
|-
| pc
| pika (12 point = 1/6 inci)
|
|-
| in
| inci
|
|}

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 {{CSS:property|margin}} property the calculation is based on the width of the containing block. When percentages are used with the {{CSS:property|font-size}} property the calculation is based on the {{CSS:property|font-size}} of the parent element but with {{CSS:property|line-height}} it is based on the {{CSS:property|font-size}} of the current element.

Font sizes on screen are best given as a percentage or in <code>em</code>s. (See the note on [[../Fonts and Text#Using ems in Internet Explorer|Using ems in Internet Explorer]].) This means that the page will interact gracefully with users' font preferences. Using pixels (<code>px</code>) for font sizes causes a number of problems and should be avoided.

The absolute units <code>mm</code>, <code>cm</code>, <code>pt</code>, <code>pc</code> and <code>in</code> 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 <code>em</code>, <code>ex</code> and <code>px</code> are called relative units. These units do not specify a fixed length. Instead they scale relative to some other quantity. In the case of <code>em</code> and <code>ex</code> they scale relative to the font size of some element.

=== Screen pixels, printer pixels and CSS pixels ===
The <code>px</code> 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 [http://www.w3.org/TR/CSS21/syndata.html#value-def-length 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

{{Prognav|Lembaran Gaya Lata|Mentakrif Peraturan Gaya|Pemilih}}

[[Category:Cascading Style Sheets]]

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