inherit对不可继承属性（如margin、display、height）无效，浏览器会静默忽略；仅对MDN中标注Inherited: yes的属性生效，使用前须通过Computed面板确认父元素已计算出有效值。
inherit 用在不可继承属性上直接被忽略
浏览器对 inherit 的处理非常严格：它只对“可继承属性”起作用，比如 color、font-family、text-align；而像 margin、display、border、height 这类默认不可继承的属性，写 margin: inherit 或 display: inherit 不会报错，但浏览器会静默忽略——你看到没效果，不是写错了，是规范就不允许它生效。
查证方法很简单：打开 MDN 搜索某个 CSS 属性（比如 margin），看文档里是否标有 Inherited: yes。没标就是不可继承，inherit 对它无效。
常见误用场景包括：
-
width: inherit在父元素 width 是auto或由内容撑开时，实际继承的是auto，子元素宽度仍坍缩 -
height: inherit写了等于白写，因为height本身不可继承，且父元素若没显式设高（如height: 200px或height: 50vh），计算值就是auto -
all: inherit看似“一劳永逸”，实则危险：它会让子元素也变成display: flex或position: absolute，布局瞬间崩坏
父元素该属性压根没生效，inherit 就无源可溯
inherit 不是“猜父元素应该有什么”，而是“读父元素当前计算出的值”。如果父元素的样式被更高优先级规则覆盖、选择器写错、或被 display: none 中断渲染树，那它的属性根本没进入计算流程，子元素自然 inherit 不到任何东西。
立即学习“前端免费学习笔记（深入）”；
验证步骤必须做：
- 打开开发者工具，选中父元素，切到 Computed 面板，找对应属性（如
color），确认右侧显示的是真实计算值（比如rgb(37, 99, 235)），而不是initial或unset - 如果 Styles 面板里该属性被划掉，说明它被覆盖了，得先解决优先级问题
- 父元素若用了
currentColor或var(--color)但变量未定义，inherit也会拿不到有效值
currentColor 比 inherit 更可靠地“穿透”颜色
当目标是让子元素文字、边框、SVG 图标等颜色始终跟随父级，color: inherit 很容易断链（比如父元素 color 来自另一层 inherit）。此时应换用 currentColor：
.parent { color: #1e40af; }<br>.child { color: currentColor; }<br>.icon { fill: currentColor; }
它不依赖继承链，而是动态取父元素“最终计算出的 color 值”，支持多层嵌套、shadow DOM 穿透（只要 :host 显式设了 color），且所有现代浏览器都支持。
注意：currentColor 只适用于颜色相关属性（color、border-color、fill、stroke），不能用于 font-size 或 margin 等。
想复刻尺寸或布局，别硬扛 inherit
用 width: inherit 或 height: inherit 对抗盒模型，本质上是在和 CSS 渲染逻辑较劲。真正稳定的做法是换布局机制：
- 让子元素占满父容器高度？给父元素加
display: flex，子元素默认拉伸（除非设了align-self: flex-start） - 需要子元素宽度严格等于父元素 content box？用
width: 100%，但确保父元素有明确宽度上下文（比如html, body { height: 100% }） - 父元素是
fit-content或 flex item？inherit能拿到值，但100%容易因 padding/border 失准——这时反而inherit更准，但前提是父元素计算值确实确定
最常被忽略的一点：很多开发者盯着 inherit 改来改去，却没意识到问题根源不在继承，而在父元素自身就没形成确定的尺寸或颜色值。先确认父元素“有没有”，再谈子元素“继不继承”。
