为什么这个网页的行高不一样？

Question

我创建了一个小的测试网页，尽管它们使用相同的CSS样式，但行高不同。当使用 Chrome 突出显示 .instruction 类的用法时，这一点变得最为明显。对于直接位于括号右侧的项目，两行之间的总边距似乎被削减了一半。

CSS 文件可在此处获取。

请记住，所有行都使用完全相同的 .instruction class CSS 样式：

.instruction {
    max-width: 48ch;
    display: flex;
    flex-direction: row;
    margin: 0.2em 0em;
    vertical-align: middle;
}

任何帮助将不胜感激！

Answer 1

em

单位是相对于父元素的字体大小。 链接

您的边距大小不同，因为父元素的字体大小不同。

如果您想使用一致的边距，请使用绝对值，例如

margin: 5px 0;

或相对单位

rem

。

rem

是相对于根元素的字体大小，（默认16px）。

.instruction {
    max-width: 48ch;
    display: flex;
    margin: 0.2rem 0;
    vertical-align: middle;
}