層疊樣式表/長度和單位
要指定寬度、高度和其他長度，您可以使用各種單位，如下表所示。
| 程式碼 | 定義 | 注意 |
|---|---|---|
| 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 畫素對應五個或六個螢幕畫素。
CSS 畫素的 正式定義 非常複雜，但基本思想是，當文件處於舒適的閱讀距離時，CSS 畫素看起來大小相同。因此，CSS 畫素在顯示器上會比在手機上物理尺寸更大，因為顯示器通常比手機離使用者的眼睛更遠。
將所需的邊距寬度/高度除以其容器的寬度/高度，將其轉換為 em。乘以 100 將其轉換為百分比。
將所需的容器寬度除以 1.62 以使用黃金分割作為內容塊的大小。將內容寬度從容器寬度中減去以使用黃金分割作為側邊欄的大小。