CSS继承机制在不可继承属性上天然失效，不是bug而是设计如此；盒模型（margin/padding/border/width/height）、布局（display/position/float）、背景（background）、定位（top/right/bottom/left）等属性默认不继承，inherit对其无效。
CSS继承机制在不可继承属性上天然失效，不是bug，是设计如此。 你写 margin: inherit 看起来没效果，不是代码错了，而是浏览器根本不会处理它——因为 margin 本身就不走继承链。
哪些属性默认不继承？
盒模型、布局、背景、定位类属性基本都不继承。常见且高频踩坑的包括：
-
margin/padding/border：子元素不会自动获得父元素的边距或边框 -
width/height：哪怕父元素设了width: 300px，子元素也不会继承这个值 -
display/position/float：这些控制布局行为的属性从不向下传递 -
background/outline：视觉装饰类属性也不继承
判断一个属性是否可继承，最可靠方式是查 MDN 页面，看 “Inherited” 一栏是否标为 yes。别信“好像应该能继承”的直觉。
inherit 关键字在不可继承属性上为什么无效？
写了 margin: inherit 却没反应，本质是浏览器直接忽略该声明。这不是兼容性问题，而是规范行为：
立即学习“前端免费学习笔记（深入）”；
-
inherit只对本就支持继承的属性起作用；对不可继承属性，它只是个无效值 - 开发者工具的 Computed 面板里，这类属性会显示为
not inherited或直接不出现继承来源 - 想让子元素有和父元素一样的
margin，必须显式写margin: 12px，不能依赖继承
all: inherit 是把双刃剑
它会让元素强行继承所有父级 CSS 属性，包括那些不该继承的：
- 父元素是
display: flex，子元素加了all: inherit，自己也变成flex，立刻脱离文档流 -
position: relative被继承后，子元素可能意外获得定位上下文，干扰 z-index 行为 -
z-index、opacity、transform等也会被继承，极易引发渲染异常
除非嵌套极浅、样式极简，否则不要用 all: inherit。真要批量复用，宁可逐个写 color: inherit、font-family: inherit。
继承链中断比属性不可继承更隐蔽
即使属性本身可继承（比如 color），以下情况也会导致“看起来没继承”：
- 父元素设了
display: none—— 整个子树跳过样式计算，inherit根本不触发 - 父元素选择器写错（如
.parent实际没命中），样式压根没生效，子元素无值可继 - 子元素自身有更高优先级规则（如行内
style="color: black"），直接覆盖继承值 - 父元素用了
content-visibility: hidden或 Shadow DOM 封装，继承链物理断开
遇到“该继承的没继承”，先打开开发者工具的 Computed 面板，确认父元素该属性的**计算值**是否真实存在、是否被覆盖——而不是只盯着 Styles 面板里的源码。
