一、理解 CSS 盒模型与等距排版
盒模型对排版的影响
在前端开发中，盒模型决定了元素如何占用空间。内容区域，加上 padding、边框、外边距共同组成盒子。padding 会增大内部空白并影响实际可用内容的区域，margin 用于元素之间的外部间距，从而实现等距排版的基本手段。
在设计等距排版时，推荐使用统一的盒模型和重置，以确保不同浏览器的一致性。通过设置 box-sizing: border-box，可以让宽高包含 padding 与 border，便于计算，从而更容易实现等距排版。
/* 全局采用 border-box 盒模型，方便等距排版 */
* { box-sizing: border-box; }二、实现等距排版的核心策略
建立统一的间距尺度系统
为了实现等距排版的稳定性，应建立一个统一的 spacing scale，例如 4px、8px、12px、16px 等倍数，使纵向和横向间距保持一致。通过 CSS 变量来管理，便于维护与主题切换。
具体做法是把常用的外边距（margin）与内边距（padding）对应到变量上，使用可复用的类或变量，从而实现整页的等距节奏。
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
}
.card { padding: var(--space-md); margin: var(--space-sm); }三、日常布局中的 padding 与 margin 应用
普通块级元素的等距排版技巧
对于块级元素，margin 上下的垂直间距易发生“外边距塌陷”，导致相邻元素间的空白看起来不均匀。因此，常见做法是给父容器添加 padding、边框或设置父容器的 overflow，以避免塌陷。
在需要统一纵向节奏时，可以把垂直间距统一落在容器的 padding 上，避免相邻元素之间的 margin 产生不可控的汇聚效果。
/* 避免外边距塌陷的示例 */
.parent { padding: 16px; border: 1px solid #e5e5e5; overflow: hidden; }
.child { margin: 8px 0; padding: 12px; }四、结合现代布局实现等距排版
Flexbox 与 Grid 的协同使用
在弹性布局（Flexbox）和网格布局（Grid）中，gap 属性可直接控制列与行之间的间距，是实现等距排版的强大工具，优先于 margin 的重复使用。
如果必须使用 margin，确保整体节奏一致，例如同一容器内的子项都采用相同的 margin，且避免塌陷带来的意外空白。
/* Flexbox 常用等距：使用 gap 替代 margin */
.container { display: flex; gap: 16px; padding: 8px; }
.item { padding: 12px; border: 1px solid #ddd; }五、调试与优化常见问题
如何快速定位间距问题
浏览器开发工具中的 计算样式(CSS Computed) 与盒模型视图可以帮助快速定位 padding、border、margin 的数值。通过拖拽和对比，可以迅速发现非预期的间距来源。
对标题、段落和卡片等常见组件，保持统一的 padding 与 margin 概览，有助于保持页面的等距排版。
/* 全局规范：保证统一的盒模型与基础间距 */
* { box-sizing: border-box; }
.section { padding: 20px; margin: 0 0 20px 0; }
.section > * { margin-bottom: 12px; }