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

Question

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

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

我知道 20ch 将为 20 个零提供足够的空间。我不明白 em 是什么。它是否为 20 M 提供了足够的空间，或者是 20 x 字体大小，即 16 号字体将提供 320，但 320 是什么单位？我不知道它们是几乎相同还是完全不同。

原文由 Paul Taylor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我查看了所有答案以及您对它们的评论，我觉得您想使用 em 和 ch 单位主要用于 width 或 height 属性。

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

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

---

CH-单位

首先，我之前从未与 ch 合作过，老实说，我没有看到它有任何实际用途 - 也许是 input 这一年，所以总是有宽度四个数字，但不会更多 - 因为它永远不会准确告诉您元素最终的宽度。

我改变了主意，现在我看到了 ch 的真正用途。 :)

一年的 input 的示例，因此始终存在四个数字的宽度，将继续存在。但是 ch 对于正确定义段落的文本宽度也非常有用。

使用像素值、相对值或百分比值非常困难 - 特别是对于响应式设计- 设置每行的完美文本宽度，包括段落的间距。但是，这可能是网站用户体验的责任。 Atlassian Design 的摘要是完美的匹配：

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

资料来源： 阿特拉斯设计

这就是 ch 可以完美地作为一个单元使用的地方。为了更好地查看，您可以查看最后的示例。

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

正如常说的， ch 是指 0 字符的宽度与其字体大小。

例如：正文有一个 font-size: 16px 并且 0 字符的宽度是 10px 来自所选字体系列，然后 1ch 等于 10px 。即使这样仍然不准确，因为例如 italic 或 bold 可以改变字符的宽度。

---

EM- & REM-单位

正如人们常说的那样， em - 并让更多玩家加入 - 也 rem 与 font-size 相关。

Where rem is always relative to the root element font-size , em is relative to the font-size of the own element or the last parent element （也可以是根元素） 带有 font-size 。

As em example: Only the body has a font-size: 16px; and the element got no font-size himself, then 1em 等于 16px 。如果元素的父元素或元素本身得到 font-size: 20px; ，则 1em 等于 20px 。 em 单位也可以自行相乘。

As rem example: The body has a font-size: 16px; , then 1rem equals 16px . Even if the element himself or a parent element got a font-size: 20px; , 1rem still equals to the body settings of 16px .

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

em 最初是基于当前字体的排版测量 M 字符但已经过时了。正如您现在所看到的，它总是引用“固定起始值”而不是字符的宽度。

---

推荐使用

As I said, from my perspective I would not recommend to use ch , em or rem for width or height 属性。这些单位对于“文本”属性更有用。

一些例子：

• 所有 h2 应该是文本的四倍： font-size: 4rem;
• 所有 p 应该总是有一个 margin 半行： margin-bottom: 0.5em;
• 元素的 line-height 应该比 font-size 大20%： line-height: 1.2em;
• A input 对于年份，应该总是有四个数字的 width ： 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>

原文由 Arne 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

他们完全不同。

一个 em 等于父元素的字体大小（以像素为单位）。像素字体大小是指字母的 _高度_（以像素为单位）。所以如果你没有改变 HTML 元素的 font-size，大多数东西的默认大小是 16px，所以一个 em 是 16px 高度。 2em 将是 32px 高度，等等。

Rem 比 ems IMO 更容易使用（因为 Rem 单位将始终引用根/HTML 元素的字体大小）。

原文由 Ollie Williams 发布，翻译遵循 CC BY-SA 4.0 许可协议