按钮内文字到边框的距离由padding控制；卡片间距用margin因属容器间关系；按钮组间距优先用flex的gap属性；卡片内对齐需从flex布局、行高、外边距逐层排查。
按钮内部文字和边框之间的距离由什么控制
按钮内文字离左右边框的距离，主要靠 padding 控制；上下距离也一样。但要注意：如果按钮设置了 height 且值小于内容行高加 padding 总和，文字会被截断或挤压——这不是盒模型失效，而是强制高度压垮了自然布局。
常见错误是只调 margin 想撑开按钮内距，结果毫无反应。因为 margin 作用于元素外部，对内部留白无效。
-
padding-left和padding-right直接影响文字到左右边框的距离 - 用
box-sizing: border-box后，width包含padding和border，更易控整体尺寸 - 避免给
button设固定height，优先用padding驱动高度，兼容不同字体和缩放
卡片之间留白为什么用 margin 而不是 padding
卡片是独立容器，彼此间距属于“容器之间”的关系，margin 是唯一能产生外间距的属性。若在卡片自身上设 padding，只会撑大卡片内部空白，无法分离相邻卡片。
但要注意 margin 的合并行为（margin collapse）：垂直方向上，两个相邻块级卡片的 margin-bottom 和 margin-top 会取较大值，而非相加。这常导致预期外的紧凑排列。
立即学习“前端免费学习笔记（深入）”；
- 解决 margin 合并：给父容器设
overflow: hidden或padding: 0.1px，可触发 BFC 阻断合并 - 水平卡片流式排列时，用
gap（配合display: flex或grid）比反复写margin更可靠 - 避免同时对卡片设
margin和对父容器设padding，容易造成间距失控，建议统一由父容器用gap或子项用margin单一控制
按钮组内按钮紧贴时，如何精准插入 8px 间距
按钮组常见于工具栏或操作区，要求按钮视觉连贯但有明确呼吸感。直接写 margin-right: 8px 给每个按钮，会导致最后一个按钮多出无意义的右空隙。
button {
margin-right: 8px;
}
button:last-child {
margin-right: 0;
}
更健壮的方式是用 flex 布局配合 gap：
.btn-group {
display: flex;
gap: 8px;
}
gap 不受 margin 合并影响，不作用于首尾外侧，语义清晰。注意 IE 不支持 gap，如需兼容，仍得回退到 :not(:last-child) + margin 方案。
-
gap在flex和grid中行为一致，推荐优先使用 - 若按钮是
inline-block，因换行符或空格产生间隙，需删 HTML 空格或设font-size: 0于父元素——这是渲染机制问题，不是盒模型本身 - 不要用
padding模拟按钮间空隙，那会改变单个按钮的点击热区，影响可访问性
卡片内按钮和标题的垂直对齐总不对齐，排查顺序是什么
这不是盒模型“坏了”，而是多个层叠因素共同作用的结果：行高、基线、垂直对齐方式、字体度量差异。最稳妥的排查路径是从内向外看。
- 先确认卡片是否用了
display: flex且没设align-items—— 默认是stretch，可能拉伸按钮高度 - 检查按钮是否设了
vertical-align: middle，而它只对inline或table-cell有效，在flex子项中无效 - 标题（如
h3）默认有margin-top/bottom，常被误认为“没对齐”，实际是外边距干扰了视觉重心 - 用浏览器开发者工具勾选“show box model”（显示盒模型），逐层看
padding、border、margin是否意外参与对齐计算
真正需要干预时，用 flex 的 align-items: center 或 justify-content: center 比依赖 vertical-align 可靠得多。盒模型本身没隐藏逻辑，但它的每一层（content → padding → border → margin）都可能成为对齐链上的断点。
