層疊樣式表/長度和單位
要指定寬度、高度和其他長度，可以使用以下表格中列出的各種單位。
| 程式碼 | 定義 | 注意 |
|---|---|---|
| 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 中使用 em 的說明。）這意味著頁面將與使用者的字型首選項和諧地互動。使用畫素 (px) 來指定字型大小會導致很多問題，應該避免。
絕對單位mm、cm、pt、pc和in在螢幕上效果不好，並且會導致許多舊瀏覽器出現問題。最安全的方法是僅將它們用於列印媒體。即使在列印媒體中，它們也可能與使用者的首選項發生衝突。
三個單位em、ex和px稱為相對單位。這些單位不指定固定長度。相反，它們相對於其他一些數量進行縮放。在em和ex的情況下，它們相對於某個元素的字型大小進行縮放。
px單位指定以CSS 畫素為單位的長度。這些畫素與文件渲染的螢幕畫素或列印文件的印表機上的點不同。例如，完全有可能一個 CSS 畫素對應兩個螢幕畫素或五個印表機點。許多網頁瀏覽器出於簡單性使用一個螢幕畫素等於一個 CSS 畫素的規則，但不能依賴於此。Opera 和 Internet Explorer 版本 7 允許使用者更改每個 CSS 畫素的螢幕畫素數量。對於使用這些瀏覽器的視力不佳的使用者，他們通常會選擇每個 CSS 畫素有 5 或 6 個螢幕畫素。
關於 CSS 畫素的 正式定義 非常複雜，但基本思想是，當文件處於舒適的閱讀距離時，CSS 畫素看起來大小相同。因此，CSS 畫素在顯示器上的物理尺寸將比在手機上更大，因為顯示器通常比手機離使用者的眼睛更遠。
將所需的邊距寬度/高度除以其容器的寬度/高度，將其轉換為 em。乘以 100 以將其轉換為百分比。
將所需的容器寬度除以 1.62 以使用黃金分割作為內容塊的大小。從容器寬度中減去內容寬度以使用黃金分割作為側邊欄的大小。