行内元素的margin和padding仅水平方向生效；垂直方向不参与布局计算，不影响行高与相邻元素间距。其上下padding仅渲染背景而不扩大行盒，需改用inline-block等显示模式才能完整支持盒模型。
行内元素的 margin 和 padding 哪些方向真正生效？
只对水平方向（margin-left、margin-right、padding-left、padding-right）有效；垂直方向（margin-top、margin-bottom、padding-top、padding-bottom）**不参与布局计算**——不会撑开行高，不影响相邻元素间距，也不会改变元素在文档流中的垂直位置。
为什么 padding-top/bottom 看起来“有颜色”却“没效果”？
这是视觉错觉：行内元素的 padding-top 和 padding-bottom 会渲染背景色或边框，但**不扩大行盒（line box）高度**，也不推动上下行内容。其背景只是“叠在当前行内”，若父容器 line-height 不够，还可能被裁剪。
-
span设padding: 20px→ 左右留白 + 上下背景可见，但行高不变 - 设
line-height: 40px后，才能完整看到上下 padding 区域 - 若同时设
background: #ff0，你会看到“黄色条块”浮在文字中间，但它不是独立盒子
想让行内元素真正拥有上下间距？别硬扛 inline
强行用 margin-top 或 padding-top 治标不治本，正确解法是改变显示模式：
- 加
display: inline-block→ 完整支持盒模型（width/height/margin/padding全生效） - 加
display: block+float: left或display: flex子项 → 彻底脱离行内限制 - 用
vertical-align配合现有inline行为微调对齐（如vertical-align: middle），比硬塞 margin 更可控
哪些元素看似行内，实则不受此限制？
注意区分「纯 inline」和「替换型行内元素」：img、input、textarea 默认是 inline-block（或浏览器内置替换元素行为），它们的 margin 和 padding **上下左右全部生效**。
立即学习“前端免费学习笔记（深入）”；
所以当你给 <img> 设 margin: 10px 能居中、设 padding: 5px 能加内边距，这不是例外——是它根本就不是标准 inline 元素。
最易忽略的一点：行内元素的 margin 和 padding 垂直方向“无效”，不是 CSS 写错了，而是规范如此——它本就不该参与块级布局。想绕过盒模型限制，先确认你是否真的需要它保持 inline 流式特性；否则，换显示模式才是正解。
