嘿，这个问题问得特别接地气——很多刚上手CSS相对单位的开发者都会搞混这俩，我来给你拆解明白：

先明确你已经搞对的 ch 单位 #

你说的完全没错：ch 是基于数字0（U+0030）的宽度定义的相对单位。所以20ch的宽度，理论上刚好能放下20个连续的0字符（不同字体里0的宽度会有细微差异，但这是W3C的标准定义）。它的核心作用是帮你控制文本容器的字符数量，比如让段落每行刚好显示60-70个字符，提升阅读体验。

再纠正误区，讲透 em 单位 #

你之前的疑问特别关键：em和M字符的宽度没有关系！ 它的本质是当前元素font-size的倍数：

• 如果当前元素的font-size是16px，那1em就等于16px，20em就是20×16=320px
• 这个数值的单位是相对的，最终浏览器会把它转换成绝对单位（比如px），但它本身是依赖于字体大小的相对单位
• 另外，如果当前元素没设置font-size，em会继承父元素的字体大小来计算

二者的核心差异（完全不是近似概念！） #

直接举个实际例子就懂了：假设我们用的字体里，数字0的宽度是8px，字母M的宽度是12px，当前元素font-size设为16px：

• 1ch = 8px → 20ch = 160px
• 1em = 16px → 20em = 320px

你看，二者的计算逻辑和结果差距很大，是完全不同的两种单位：

• ch 聚焦于字符宽度，专为文本排版的字符数量控制设计
• em 聚焦于字体大小倍数，是通用型的相对单位，可用于设置尺寸、间距等几乎所有CSS属性

最后补个小提醒 #

如果你想基于字符宽度做排版，用ch；如果想跟着字体大小做自适应的尺寸/间距，用em（或者更省心的rem，不过那是另一个话题了）。

内容的提问来源于stack exchange，提问作者Paul Taylor