元素最终渲染高度 = content 高度 + padding-top + padding-bottom + border-top + border-bottom（标准盒模型），padding 独立撑开空间且不受 line-height 影响。
padding 如何参与元素总高度计算
元素的最终渲染高度由 content 高度 + padding-top + padding-bottom + border-top + border-bottom 共同决定（标准盒模型）。padding 是「实实在在撑开空间」的部分，它直接加在内容区域之外，且始终生效——哪怕内容为空，只要设置了 padding，元素就有对应高度。
注意：padding 不受 line-height 影响，也不会被 line-height 覆盖或压缩；它是独立于行内布局的盒模型层级属性。
- 块级元素设置
padding: 20px→ 上下各增加 20px 高度 -
box-sizing: border-box会把padding和border吸收进设定的height内，但实际占据的空间不变 - 如果元素只有文本且未设
height，padding仍会推高整个框，哪怕line-height算出的行高更小
line-height 对高度的实际影响范围
line-height 只作用于「行内内容」的垂直对齐和行间距，它不直接改变盒模型高度，但会间接抬升块容器的最小高度（尤其当内容为纯文本、无其他块级子元素时）。
关键点在于：当块容器没有显式 height，其 min-height 由「行盒（line box）的高度」决定，而该高度 ≈ font-size × line-height（按数值计算），再叠加 padding 才是最终渲染高度。
立即学习“前端免费学习笔记（深入）”；
- 若
line-height: 1.5，font-size: 16px→ 单行行高 = 24px - 若同时有
padding: 10px→ 总高度至少 = 24px + 10px + 10px = 44px - 多行文本时，
line-height决定每行基线间距，但首行顶边到末行底边的距离 ≠ 行高 × 行数（因上下行存在半行空白重叠）
padding 和 line-height 共存时的真实高度组成
最终渲染高度 = max(内容自然高度, line-height × 行数对应的有效撑开高度) + padding-top + padding-bottom + border-width。其中「内容自然高度」常被 line-height 主导，尤其单行文本。
常见误区是认为 line-height 会「覆盖」或「替代」padding —— 实际上二者完全正交：一个管行内排版，一个管盒边界留白。
.box {
font-size: 14px;
line-height: 2;
padding: 12px 8px;
}
/* 假设单行文本：
行高 = 14 × 2 = 28px
padding 上下 = 12 + 12 = 24px
总高度 = 28 + 24 = 52px（无 border 时）*/- 若文本换行，每新增一行大致增加
line-height × font-size，但首末行外延仍需叠加padding - 若设置了
height: 40px，且line-height算出的行高 +padding> 40px，则内容可能溢出或被裁剪（取决于overflow） -
vertical-align对line-height的表现有干扰，但在块级容器中通常不生效
调试时容易忽略的细节
浏览器开发者工具显示的「Height」值（Layout 面板）是最终渲染高度，但它不自动拆解来源。想确认是否被 line-height 主导，可临时将 line-height 设为 1 并观察变化；想验证 padding 是否生效，可改用背景色或边框突出显示。
- 使用
getComputedStyle(el).height返回的是字符串（如"52px"），不是计算过程 -
offsetHeight包含padding和border，但不含margin；它不反映line-height的中间计算逻辑 - Flex 或 Grid 容器中，子项的
line-height可能被对齐方式（如align-items: center）覆盖视觉效果，但盒模型高度仍按上述规则计算
