CSS中em单位和ch单位有什么区别？

Question

CSS中em单位和ch单位有什么区别？

css

42

CSS的em与ch单位有什么区别？

我在我的样式表中使用了ch，但是em似乎更常用。它们之间有什么区别？

我知道20ch足以容纳20个零。但我不理解什么是em。它是否足以容纳20个M，或者是20 x字体大小，即16号字体会给出320，但320是什么单位呢？我不明白它们是否几乎相同或完全不同。

- Paul Taylor

3

em 是字体的字号，传统上它是大写字母 M 的宽度（因此叫 em）。ch 是数字 0 在字体中的宽度。 - jpaugh

3

您是否对文档中的某些内容存在疑问？请参阅 https://drafts.csswg.org/css-values-3/#lengths 和 https://developer.mozilla.org/en-US/docs/Web/CSS/length。 - Heretic Monkey

2

你到底不明白什么？你到底明白什么？除了复制和粘贴两个单元的规范定义，你希望我们如何回答这个问题？ - zero298

@MikeMcCaughan 我理解20ch可以提供足够的空间放置20个零，但我不明白em是什么意思，它是否提供足够的空间放置20个M或者是20倍的字体大小，例如16号字体会给出320，但是320是什么单位呢？我不知道它们是否几乎相同或完全不同。 - Paul Taylor

它是20 x字体大小，其中字体大小在此处定义（https://developer.mozilla.org/en-US/docs/Web/CSS/font-size）。由于字体大小本身可以是相对的（并以“em”定义），因此我无法回答您的问题。通常，当指定了字体大小时，它是所使用字体的M字形的大小。当然，您可以通过创建一个HTML页面并适当设置CSS来自行尝试所有这些。 - Heretic Monkey

显示剩余2条评论

4个回答

5

我通常使用em和rem。这是一种更简单的使事物具有响应性的方式，取决于您选择的字体系列而不是特定字符。

来自MDN <length>文档：

ch - 表示元素font中字符“0”（Unicode字符U+0030）的宽度或更准确地说是其推进度量。

em - 表示元素的计算font-size。如果在font-size属性本身上使用，则表示元素的继承font-size。

<h1>How em works</h1>

<h2>Default values</h2>
<p style="font-size: 1em">I am 1 em on a default browser (10px)</p>
<p style="font-size: 2em">I am 2 em on a default browser (20px)</p>
<hr>
<h2>Inherit values</h2>
<div style="font-size: 18px">
  <p style="font-size: 1em">I am 1 em depending on my parent element font-size (18px)</p>
    <p style="font-size: 2em">I am 2 em depending on my parent element font-size (36px)</p>
</div>

- Gerardo BLANCO

在发布问题之前，我确实查看了w3c学校的内容，但我仍然不理解答案。 - Paul Taylor

@PaulTaylor 这两个单位都是相对单位。这意味着它取决于另一件事情。那些值已经发布在上面了。 - Gerardo BLANCO

@PaulTaylor 我觉得你可能对 em 单位的工作原理还有些困惑。我在这个答案中写了一小段代码片段，让你可以看到它是如何工作的。 - Gerardo BLANCO

@PaulTaylor，希望我的回答对你有所帮助。如果没有其他问题的话，请考虑接受它。谢谢。 - Gerardo BLANCO

它并没有太大的帮助，因为它被用来改变字体大小，我不明白它如何与字段宽度相适应，也不明白为什么em通常比ch更好。 - Paul Taylor

显示剩余11条评论

0

它们完全不同。

一个em等于父元素的字体大小（以像素为单位）。像素字体大小是指字母的高度，以像素为单位。因此，如果您没有更改HTML元素的字体大小，则大多数内容的默认大小为16px，因此一个em的高度为16px。2em将是32px高度，依此类推。

在我看来，Rem比em更容易使用（因为Rem单位始终会引用根/HTML元素的字体大小）。

- Ollie Williams

那么如果他们测量高度，就不适合设置字段宽度了吗？ - Paul Taylor

虽然你可以使用em单位来指定宽度，但这并不是很直观。如果你想要精确地指定一行可以容纳多少个字符，请使用ch单位。个人而言，我发现像素最容易使用。 - Ollie Williams

但是像素在处理不同设备时并不灵活。 - Paul Taylor

而且ch的宽度只有'0'，我有一个赏金要颁发，但如果没有得到更完整的答案，我无法颁发它。 - Paul Taylor

-2

在Gerardo的回答中有两件事要补充：

浏览器支持方面有所不同：em将被今天使用的任何浏览器支持，但ch单位在IE11中计算略有不同，并且在Opera Mini中缺少支持。
ch单位始终基于“0”字符，而em相对于其各自父元素的字体大小。

- Benjamin Solum

1

请详细解释一下“各自父元素的字体大小”是什么意思，难道它不是基于“M”字符来确定的吗？随着所使用的字体大小的变化，ch度量难道不会改变吗？ - Paul Taylor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arne · Accepted Answer

我看了所有的答案，以及你对它们的评论，感觉你主要想使用em和ch单位来设置width或height属性。

[...]那么它们不适合用于设置字段宽度吗？

从我的角度来看，我不建议这样做。

CH-单位

首先，我以前从未使用过ch，老实说我也没有看到任何真正的用处- 也许是一个input的年份，所以总是有四个数字的宽度，但不要超过 -因为它从来不会告诉你元素最终的宽度。

现在我改变了主意，我认为ch确实有很好的实际用途。 :)

关于以输入年份的例子，使得输入框始终有四个数字的宽度，这个例子还存在。但是，ch也非常有用于准确定义段落文字的文本宽度。

使用像素、相对值或百分比值非常困难 - 尤其是对于响应式设计 - 正确设置每行包括间距的段落文本宽度。然而，这可能会对网站的用户体验造成损害。Atlassian Design的一篇摘要是完美的匹配：

将阅读环境设置为适合读者的模式。宽的文字行很难阅读，使得人们更难以集中注意力。虽然没有正确测量文本的完美宽度的方法，但一个好的目标是每行包括间距的字符数在60和100之间。设置最佳行长可以将内容分解为易于消化的块。

来源：Atlassian Design

这就是ch作为单位的完美使用场景。为了更好的展示，您可以查看末尾的示例。

但现在终于到了ch的定义部分；）

正如经常提到的那样，ch是指0字符相对于其字体大小的宽度。

例如：正文的font-size: 16px，所选字体系列的0字符宽度为10px，则1ch等于10px。即使如此，这仍然不准确，因为例如italic或bold可以改变字符的宽度。

EM-和REM-单位

正如经常所说的，em （并增加一个玩家） 以及 rem 都与 font-size 相关。

rem 始终相对于根元素的 font-size，而 em 则相对于自身元素或最后一个带有 font-size 的父元素或根元素。

例如使用 em: 只有 body 具有 font-size: 16px; 而该元素没有自己的 font-size，则 1em 等于 16px。如果该元素的父级或元素本身具有 font-size: 20px;，则 1em 等于 20px。 em 单位也可以相乘。

例如使用 rem: body 具有 font-size: 16px;，则 1rem 等于 16px。即使元素本身或父元素具有 font-size: 20px;，1rem 仍等于 body 的设置，即 16px。

[...] 如果 '0' 的大小是字体中的 ch，为什么 'M' 的大小不是 em [...]

em 最初基于当前字体 M 字符的印刷测量，但这已经过时了。现在，它总是引用“固定起始值”，而不是字符的宽度。

推荐使用方式

我认为，不建议将 ch、em 或 rem 用于 width 或 height 属性。这些单位对于 “文本” 属性更有用。

一些例子:

h2的字体大小应该是正常文本的四倍：font-size: 4rem;
p元素的下边距应始终为半个行高：margin-bottom: 0.5em;
元素的line-height应比font-size大20%：line-height: 1.2em;
年份的input应始终具有四个数字的宽度：width: 4ch;
p的文本宽度应始终为每行80个字符，包括间距：width: 80ch;

但像素在处理不同设备时并不灵活

因此，总结起来，我建议您简单地使用百分比 width: 80%; 或视口宽度和视口高度 height: 100vh; width: 100vw;。或者至少始终使用最大值：width: 1000px; max-width: 100%;。

以下是一些代码片段 - 仅供理解width属性的示例：

em - 相对于当前元素或上级元素中具有字体大小的元素的字体大小

body {
  font-size: 16px;
}

p {
  font-weight: bold;
}

div {
  width: 1em;
  height: 50px;
  background: lightgray;
}

.em-0-5 {
  width: 0.5em;
}

.em-10 {
  width: 10em;
}

.fs-10 {
  font-size: 10px;
}

.parent {
  font-size: 0.5em;
}

.parent div {
  width: 10em;
}

<p>1em (body font-size * 1 = 16px)</p>

<div></div>

<p>0.5em (body font-size * 0.5 = 8px)</p>

<div class="em-0-5"></div>

<p>10em (body font-size * 10 = 160px)</p>

<div class="em-10"></div>

<p>10em from 10px own element font-size (element font-size * 10 = 100px)</p>

<div class="em-10 fs-10"></div>

<p>10em from 0.5em parent font-size (body font-size * parent font-size * 10 = 80px)</p>

<span class="parent">

  <div></div>

</span>

rem - 相对于根元素的字体大小

body {
  font-size: 16px;
}

p {
  font-weight: bold;
}

div {
  width: 10rem;
  height: 50px;
  background: lightgray;
}

.parent {
  font-size: 20px;
}

.parent div {
  width: 5rem;
}

<p>10rem (body font-size * 10 = 160px)</p>

<div></div>

<p>5rem in a parent element with font-size 20px (body font-size * 5 = 80px)</p>

<span class="parent">

  <div></div>

</span>

ch - 相对于数字“0”的宽度。

body {
  font-size: 16px;
}

p {
  font-weight: bold;
}

input {
  width: 4ch;
}

div {
  width: 20ch;
  background: lightgray;
  word-wrap: break-word;
}

.ch-1 {
  width: 1ch;
}

.ch-5 {
  width: 5ch;
  font-size: 32px;
}

<p>4ch (space of 4x zero character)</p>

<input type="text" value="2018" />

<p>20ch (space of 20x zero characters)</p>

<div>0000000000000000000000000</div>

<p>Also 20ch (space of 20x zero characters)</p>

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </div>

<p>1ch (space of 1x zero character)</p>

<div class="ch-1">00000</div>

<p>5ch from font-size 32px (space for 5x zero characters with a font-size of 32px)</p>

<div class="ch-5">0000000000000000000000000</div>