@page margin 属性仅在值为变量 css 时才适用

【问题标题】：@page margin property does not apply ony when the value is a variable css@page margin 属性仅在值为变量 css 时才适用
【发布时间】：2022-11-21 03:24:42
【问题描述】：

我做了一个这样的CSS样式表：

:root {
  --main-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --margin: 10cm;
}

@media print {
  *:not(span) {
    font-family: var(--main-font);
  }
  @page {
    size: A4;
    margin: var(--margin);
  }
}

main-font 按预期工作，但 --margin 不是。打印窗口时，字体更改为 --main-font 值，但边距设置为默认值。奇怪的是，如果我将@page margin 值更改为静态值，
喜欢：margin: 10cm 它有效！我不知道为什么会这样。

【问题讨论】：

标签： javascript html css

【解决方案1】：

我认为您不能在@page 内使用任何带边距的值。我没有在 the specification 中找到关于此的明确声明，但在 the MDN 页面中你可以阅读：

注意：W3C 正在讨论如何处理与视口相关的 <length> units、vh、vw、vmin 和 vmax

所以我认为 CSS 变量也会因为类似的原因而被忽略

【讨论】：

如果我找到关于保证金允许的内容的明确指示，我将更新答案
谢谢你的回答！如果那是不允许的，那么如果我在其中硬编码一个值，它怎么会起作用呢？它以正确的边距打印文档！
@clapmemereview 两者不同，如果系统不允许 CSS 变量，则变量的内容无关紧要。解析器不会以相同的方式处理它们