math-depth

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

math-depth 属性描述了数学公式中每个元素相对于该公式顶层容器的“深度”概念。当应用 font-size: math 时，它用于缩放元素的 font-size 的计算值。

注意：在 MathML Core 用户代理样式表中，font-size: math 是 <math> 元素的默认值，因此无需明确指定。

语法

css

/* Keyword values */
math-depth: auto-add;

/* Relative values */
math-depth: add(2);
math-depth: add(-2);

/* Absolute value */
math-depth: 4;

/* Global values */
math-depth: inherit;
math-depth: initial;
math-depth: revert;
math-depth: revert-layer;
math-depth: unset;

值

auto-add: 当继承的 math-style 为 compact 时，设置为继承的 math-depth 加 1。
add(<integer>): 设置为继承的 math-depth 加指定的整数。
<integer>: 设置为指定的整数。

正式定义

初始值	`0`
应用于	所有元素
继承性	是
计算值	同指定值
动画类型	不可动画化

正式语法

math-depth = 
  auto-add          |
  add( <integer> )  |
  <integer>

示例

指定数学深度

以下示例显示了更改 math-depth 属性对子公式字体大小的影响。每个子公式中的数字表示应用的 math-depth 和缩放因子。

第一个 <mtext> 元素用作其他子公式的参考，没有应用特定的样式。第二个和第三个子公式将 math-depth 设置为 auto-add，并显示根据 math-style 进行缩放的效果。

最后两个子公式显示了将 math-depth 设置为特定值的效果。

HTML

html

<p>
  <math>
    <mtext>0</mtext>

    <!-- auto-add value has no effect when math-style is normal -->
    <mrow style="math-style: normal">
      <mrow style="math-depth: auto-add">
        <mtext>0</mtext>
      </mrow>
    </mrow>

    <!-- the inherited math-style is compact, so math-depth is set to 1 -->
    <mrow style="math-depth: auto-add">
      <mtext>1</mtext>
    </mrow>

    <mrow style="math-depth: add(2)">
      <mtext>2</mtext>
      <mrow style="math-depth: add(-1)">
        <mtext>1</mtext>
      </mrow>
      <mrow style="math-depth: 0">
        <mtext>0</mtext>
      </mrow>
    </mrow>
  </math>
</p>

p {
  font-size: 3rem;
  margin: 1rem 0;
}

结果

规范

规范
MathML Core # the-math-script-level-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后修改于 2025 年 7 月 14 日，由 MDN 贡献者完成。

在 GitHub 上查看此页面 • 报告此内容的问题