border/margin/padding不继承是CSS规范刻意设计，因其属盒模型属性，需逐元素精确控制占位与边界，继承会破坏布局可控性。
为什么 border / margin / padding 不继承？
因为 CSS 规范明确将这些属性设计为不可继承——这不是遗漏，而是刻意为之。如果 border 能继承，一个设了 border: 1px solid #ccc 的 <div>，其内部所有 <code><p></p>、<span></span>、<ul></ul> 都会自动带边框，页面立刻变成“框中框”，布局完全失控。
盒模型属性（border、margin、padding、width、height、background 等）的核心作用是定义元素在布局流中的占位与边界，它们必须逐元素精确控制。继承反而会破坏排版意图，违背 CSS “可控性优先” 的设计原则。
哪些属性默认不继承？分类很清晰
不是“有些”不继承，而是一整类属性被系统性排除在继承机制之外：
-
border及其子属性：border-width、border-style、border-color - 所有盒模型尺寸与间距：
margin、padding、width、height（含min-/max-变体） - 背景类：
background、background-color、background-image - 定位与布局：
position、display、float、z-index、overflow
它们的共性是：影响元素自身占位和容器行为，而非内容呈现。一旦继承，就会干扰正常流、Flex/Grid 布局或 BFC 触发逻辑。
立即学习“前端免费学习笔记（深入）”；
inherit 强制继承时要注意什么？
inherit 关键字能绕过默认规则，但不是万能的：
-
border: inherit合法，但若父元素border是none或未声明，子元素得到的是计算值0px none currentColor，视觉上仍无边框 -
margin: inherit会把父元素的计算后外边距值传下来，但若父元素margin是auto，子元素继承的就是auto—— 这在多数场景下无实际效果 -
display: inherit虽语法合法，但极易引发意外：比如父是flex，子继承后变成flex，但子元素原本是<span></span>，可能突然换行或撑满容器
真正需要“复用”盒模型样式时，更稳妥的做法是抽成类名（如 .has-border）或用 CSS 自定义属性统一控制，而不是依赖 inherit。
为什么你看到的“没继承”有时其实是被覆盖了？
很多你以为“继承失效”的情况，其实是继承确实发生了，但被更高权重的声明压掉了：
- 检查 DevTools 中该属性是否标着 “Inherited from …”（灰色），这是继承发生的铁证
- 常见干扰源：
style="color: #000"内联样式（权重 1000）、ID 选择器（如#header p）、通配符重置（* { color: #333; }） - 特别注意表单控件：
<input>、<select></select>默认忽略父级font-size和font-family，得显式写font-size: inherit才透传
继承本身很安静，它只在没有任何有效声明时才悄悄生效；一旦有哪怕一条低权重的规则写了该属性，继承就彻底退出舞台。这个“安静”恰恰是最容易被忽略的复杂点。
