在CSS中，常見的字體大小單位有px，em和rem三種。其中px是絕對單位，而em和rem是相對單位。

em是基于父元素字體大小的相對單位，而rem則是基于html根元素字體大小的相對單位。因此，em和rem的大小在不同的父元素或根元素字體大小下可能會有所不同。

下面我們來看一下em和rem的具體區別：

.parent {
font-size: 16px;
/* em基于父元素字體大小，相當于16px */
/* rem基于html根元素字體大小，相當于16px */
}
.child-1 {
font-size: 1em;
/* 繼承了父元素字體大小，相當于16px */
}
.child-2 {
font-size: 1rem;
/* 基于html根元素字體大小，相當于16px */
}
.child-3 {
font-size: 2em;
/* 繼承了父元素字體大小，相當于32px */
}
html {
font-size: 14px;
/* html根元素字體大小變為14px */
}
.child-4 {
font-size: 1rem;
/* 基于html根元素字體大小，相當于14px */
}

從上面的代碼中可以看出，child-1和child-2的字體大小相同，都是16px。而child-3的字體大小為32px，因為它繼承了父元素的字體大小，并且自身字體大小為父元素字體大小的2倍。當改變html根元素的字體大小時，child-2的字體大小會隨之改變，而child-1和child-3則不受影響。

綜上所述，em和rem都是相對單位，可以避免絕對單位帶來的縮放問題。而em是基于父元素字體大小的相對單位，rem則是基于html根元素字體大小的相對單位。使用時需要根據實際情況選擇合適的單位。