使用em作為字體單位的CSS技巧

一、什麼是em？為什麼要使用em作為字體單位？

em是相對單位，相對於所在元素的字體大小而言。例如，當前元素的字體大小為16px，如果設置元素的字體大小為1.5em，則實際字體大小為24px。

使用em作為字體單位有以下幾個好處：

1、em相對於固定單位（如px）更為靈活，可以隨着父元素的字體大小的改變而改變。

2、em使得整個頁面字體的大小可以被方便地統一，只需要改變根元素的字體大小即可。

3、em對於視力較差的用戶非常友好，可以通過瀏覽器或系統的字體縮放功能方便地調整字體大小。

二、如何設置字體大小？

在CSS中，可以使用em作為字體大小的單位。通常情況下，建議在根元素（html）中設置字體大小為16px，然後使用em設置其他元素的字體大小。例如，設置元素的字體大小為1.5em，即相當於使用24px作為字體大小。

以下為示例代碼：

html {
  font-size: 16px;
}

body {
  font-size: 1rem; /* 相當於16px */
}

h1 {
  font-size: 2em; /* 相當於32px */
}

p {
  font-size: 1em; /* 相當於16px */
}

.small {
  font-size: 0.8em; /* 相當於12.8px */
}

三、如何設置行高？

行高可以使用em或其他單位進行設置。通常建議使用em作為行高單位。

以下為示例代碼：

p {
  font-size: 1em;
  line-height: 1.5em; /* 行高為1.5倍字體大小 */
}

.small {
  font-size: 0.8em;
  line-height: 1.2em; /* 行高為1.2倍字體大小 */
}

四、如何設置間距？

間距包括元素之間的間距和元素內部的間距。可以使用em或其他單位進行設置。

以下為示例代碼：

.container {
  padding: 1em; /* 內部間距為1em */
}

h1 {
  margin-bottom: 0.5em; /* 底部間距為0.5em */
}

p {
  margin-bottom: 1em; /* 底部間距為1em */
}

五、使用em的注意事項

1、一般情況下，不要在相對嵌套的元素中連續使用em。例如，如果A元素的字體大小為1.5em，B元素的字體大小為1.5em，則B元素的字體大小為A元素的字體大小的1.5倍，即2.25em（而不是1.5 * 1.5em）。

2、在瀏覽器中，字體大小最小為12px。如果需要設置更小的字體，則需要使用其他單位。

六、總結

使用em作為字體單位，可以使頁面字體大小更為靈活，並且對於視力較差的用戶非常友好。在設置字體大小、行高、間距時，可以靈活運用em作為單位進行設置。注意不要在相對嵌套的元素中連續使用em，並且必須注意瀏覽器中字體大小的最小限制。