層疊樣式表/長度和單位
要指定寬度、高度和其他長度，可以使用以下表格中列出的各種單位。
| 程式碼 | 定義 | 注意 |
|---|---|---|
| em | 元素字型的高度。 | |
| ex | 元素字型中字母“x”的高度。 | |
| px | 畫素 | |
| mm | 毫米 | |
| cm | 釐米 | |
| pt | 磅 (1/72 英寸) | |
| pc | 皮卡 (12 磅 = 1/6 英寸) | |
| in | 英寸 |
長度也可以指定為另一個長度的百分比。使用百分比可能很複雜，因為基準長度因屬性而異。例如，當百分比與 margin 屬性一起使用時，計算基於包含塊的寬度。當百分比與 font-size 屬性一起使用時，計算基於父元素的 font-size，但對於 line-height，它基於當前元素的 font-size。
螢幕上的字型大小最好以百分比或 em 為單位給出。（參見 在 Internet Explorer 中使用 ems 中的說明。）這意味著頁面將與使用者的字型首選項很好地互動。使用畫素 (px) 作為字型大小會導致許多問題，應避免。
絕對單位 mm、cm、pt、pc 和 in 在螢幕上效果不佳，並且在許多舊瀏覽器中會導致問題。最安全的方法是僅將它們用於列印媒體。即使在列印媒體中，它們也可能與使用者的首選項產生不良互動。
三個單位 em、ex 和 px 被稱為相對單位。這些單位不指定固定長度。相反，它們相對於某個其他量進行縮放。對於 em 和 ex，它們相對於某個元素的字型大小進行縮放。
px 單位指定 CSS 畫素 中的長度。這些與文件渲染的螢幕上的畫素或列印的印表機上的點不同。例如，完全有可能有兩個螢幕畫素或五個印表機點對應一個 CSS 畫素。出於簡單性考慮，許多網路瀏覽器使用一個螢幕畫素等於一個 CSS 畫素的規則，但您不能依賴於此。Opera 和 Internet Explorer 版本 7 允許使用者更改每個 CSS 畫素的螢幕畫素數量。使用這些瀏覽器的視力不佳的使用者通常選擇將每個 CSS 畫素設定為五個或六個螢幕畫素。
CSS 畫素的正式定義 非常複雜，但基本思想是當文件處於舒適的閱讀距離時，CSS 畫素看起來大小相同。因此，CSS 畫素在顯示器上的物理尺寸會比在手機上更大，因為顯示器通常比手機離使用者的眼睛更遠。
將所需的邊距寬度/高度除以其容器的寬度/高度以將其轉換為 ems。乘以 100 以將其轉換為百分比。
將所需的容器寬度除以 1.62 以使用黃金分割作為內容塊的大小。從容器寬度中減去內容寬度以使用黃金分割作為側邊欄的大小。