应正确应用CSS的margin、padding、box-sizing、gap及负margin属性：margin控制元素外部间距，padding调节内部留白，box-sizing统一尺寸计算，gap简化flex布局间隙，负margin用于微调位置。
如果您在使用 HTML5 构建页面时发现元素之间过于紧凑或松散，无法达到预期的视觉层次与结构清晰度，则很可能是由于未正确应用 CSS 的 margin 或 padding 属性。以下是针对此问题的多种设置方式：
一、使用 margin 控制元素外部间距
margin 作用于元素边框之外，用于调节该元素与其他相邻元素之间的距离，不影响自身内容区域大小，适用于控制块级元素间的垂直留白或水平分离。
1、在 CSS 中选中目标元素，例如 div.container，为其设置 margin: 20px; 实现四边等距外边距。
2、若需单独控制某一边，可使用 margin-top: 10px;、margin-right: 15px;、margin-bottom: 12px; 或 margin-left: 8px;。
立即学习“前端免费学习笔记（深入）”；
3、使用简写形式设定上下与左右不同值：例如 margin: 10px 20px; 表示上下为 10px、左右为 20px。
二、使用 padding 控制元素内部间距
padding 作用于元素边框之内，扩展内容区与边框之间的空白，会增大元素实际占用空间，常用于按钮文字留白、卡片内容呼吸感营造等场景。
1、为段落元素 p.intro 添加内边距：设置 padding: 16px 24px; 使文字距离上下边框 16px、左右边框 24px。
2、如需仅调整顶部和底部内边距，可写为 padding-top: 12px; padding-bottom: 12px;，保留左右为默认值。
3、使用百分比单位实现响应式内边距，例如 padding: 3% 5%;，其计算基准为父容器宽度。
三、利用 box-sizing 统一边距计算逻辑
默认情况下，width 和 height 不包含 padding 与 border，导致设置固定宽高后添加 padding 会撑大元素。通过 box-sizing 可统一尺寸解析方式，避免布局错位。
1、全局重置所有元素盒模型：在 CSS 开头添加 * { box-sizing: border-box; }。
2、对特定元素单独设置：例如为输入框 input.form-input 添加 box-sizing: border-box;，确保其 width=100% 时仍能容纳 padding。
3、验证效果：设置 width: 200px; padding: 10px; border: 2px solid #333; 后，元素总宽度仍为 200px（而非 224px）。
四、使用 flexbox 的间隙属性 gap 替代 margin
当容器为 flex 布局时，gap 属性可直接定义子项之间的间距，避免因 margin 折叠或父子间意外影响带来的复杂性，特别适合网格化排列。
1、将父容器设为 flex：为 .flex-row 添加 display: flex; 与 gap: 12px;。
2、支持方向细化：使用 row-gap: 8px; 控制行间距，column-gap: 16px; 控制列间距。
3、在多行 flex 容器中，gap 仍保持稳定生效，无需为每个子元素单独设置 margin。
五、通过负 margin 微调元素位置关系
负 margin 可使元素突破常规文档流限制，实现重叠、对齐微调或消除默认间距，但需谨慎使用以防破坏语义结构与可访问性。
1、消除列表项默认顶部间距：对 ul li:first-child 设置 margin-top: -8px;。
2、实现标题与上一区块无缝衔接：为 h2.section-title 添加 margin-top: -16px;，使其顶部与前一元素底边对齐。
3、配合相对定位做像素级偏移：设置 position: relative; top: -4px; margin-right: -6px; 调整图标位置。
