边距控制的关键在于理清盒模型关系并善用现代布局：统一box-sizing: border-box、优先padding、用gap替代margin、响应式用clamp()、抽离自定义属性、flex/grid中用对齐替代手动margin。
边距控制不好，往往不是“用得少”，而是没理清盒模型各属性之间的关系。关键在明确 content、padding、border、margin 如何共同影响元素实际占位和间距，再配合现代布局方式协同使用。
用 box-sizing: border-box 统一计算基准
默认的 content-box 会让 width/height 只管内容区，加上 padding 和 border 就容易撑大容器，导致响应式时布局错乱。改成 border-box 后，width/height 包含 padding 和 border，留白更可控。
- 全局设置更省心：*, *::before, *::after { box-sizing: border-box; }
- 这样写 padding 时，不用反复心算“减去多少才不超宽”
- 配合 max-width: 100% 图片、表单控件也能自然缩放不溢出
优先用 padding 营造内边距，慎用 margin 做“布局定位”
margin 容易引发外边距合并（margin collapse），尤其在垂直方向；而 padding 属于元素自身，更稳定，也更容易被 flex/grid 的对齐属性配合。
- 卡片、按钮、表单项内部留白，用 padding 更直观可靠
- 组件之间需要统一间距？可封装成带 margin 的“间距类”，如 .mt-16 { margin-top: 16px; }，避免散落的 margin 值难以维护
- flex 容器中，用 gap 替代子项 margin，彻底避开合并问题
响应式边距用 clamp() 或媒体查询分层控制
固定 px 边距在小屏上显得拥挤，大屏又太空。与其写一堆 media query，不如用动态函数让边距随视口平滑变化。
立即学习“前端免费学习笔记（深入）”；
- 例如：padding: clamp(12px, 4vw, 24px); —— 小屏至少 12px，大屏最多 24px，中间按视口宽度比例过渡
- 对关键断点仍需媒体查询时，建议按容器而非 viewport 写，比如针对卡片最大宽度设 @media (min-width: 600px)，更贴近真实布局场景
- 避免在多个选择器里重复写相同 margin/padding，抽成 CSS 自定义属性，如 --space-md: clamp(8px, 2.5vw, 16px);
Flex/Grid 中善用对齐与自动空白替代手动 margin
在 flex 或 grid 布局中，很多“靠 margin 推开”的需求，其实有更语义化、更鲁棒的解法。
- 水平居中？用 justify-content: center，别给子项加 margin: 0 auto
- 等距分布？justify-content: space-between 或 gap: 1rem 比每个 item 加 margin 简洁得多
- 首尾留白？grid 可结合 padding + place-items 控制，避免用 margin 模拟“空格项”
