HTML5元素间距可通过五种方法设置：一、用margin控制外边距，注意外边距合并；二、用padding调整内边距，配合box-sizing:border-box；三、Flexbox/Grid中用gap统一子元素间隙；四、用line-height调节行内元素行高；五、用CSS变量与calc()实现动态响应式间距。
如果您在HTML5页面中发现元素之间没有预期的间隔，或间距过大过小，则可能是由于CSS默认样式、盒模型设置或布局方式导致。以下是设置HTML5元素之间间距的具体方法：
一、使用margin属性控制外边距
margin用于在元素外部创建空白区域，影响该元素与其他相邻元素之间的距离。它不会改变元素自身尺寸，但会作用于其渲染位置和周围空间。
1、在CSS中为指定HTML5元素（如<header>、<section>）设置margin值，例如：margin: 20px；表示上下左右均为20像素。
2、使用margin-top、margin-bottom等单侧属性精确控制垂直方向间距，例如：margin-bottom: 16px；可使当前元素与下方元素保持16像素空隙。
立即学习“前端免费学习笔记（深入）”；
3、对相邻块级元素应用margin时需注意外边距合并现象，两个垂直相邻块元素的上下margin会取较大值而非相加。
二、使用padding属性调整内边距
padding在元素内容区与边框之间添加空白，虽不直接影响元素间距离，但可通过改变容器视觉尺寸间接影响布局密度和相对间距感。
1、为<article>或<aside>等语义化标签设置padding，例如：padding: 12px 16px；表示上下12像素、左右16像素。
2、结合box-sizing: border-box；确保padding值包含在width/height设定范围内，避免意外溢出。
3、当父容器启用flex或grid布局时，padding可在不破坏子项排列逻辑的前提下统一预留内部呼吸空间。
三、利用Flexbox的gap属性统一控制间隙
gap是Flexbox和Grid布局中专用于设置子元素之间间距的CSS属性，它直接作用于容器，自动避免外边距合并问题，且语法简洁。
1、对使用display: flex；的<nav>或<main>容器添加gap: 8px；即可让所有直系子元素横向纵向均保持8像素间隔。
2、支持分别定义行间距与列间距，例如：row-gap: 12px；column-gap: 24px；适用于需要非对称间距的导航栏或卡片列表。
3、gap属性不适用于float或inline布局，仅在flex容器和grid容器中生效。
四、通过line-height调节行内元素垂直间距
line-height主要影响文本行高，但对<span>、<strong>等行内元素及其所在行框的高度具有决定性作用，进而影响多行内容间的视觉间距。
1、为包含文本的<footer>或<p>设置line-height: 1.6；可使每行文字基线间距为字体大小的1.6倍。
2、使用无单位数值（如1.5）可保证继承时按当前字体大小计算，避免固定像素值在缩放时失衡。
3、当多个行内元素嵌套于同一段落中时，line-height会作用于整行框，而非单个元素，因此不能替代margin实现元素级独立间距。
五、借助CSS自定义属性与calc()动态计算间距
通过CSS变量配合calc()函数，可实现响应式、关联式间距控制，尤其适合需要随视口或字体变化而调整的场景。
1、在:root中定义--base-spacing: 8px；然后在任意选择器中使用margin-bottom: calc(var(--base-spacing) * 2)；
2、结合rem单位与根字体大小，例如margin: calc(1rem + 4px)；使间距既响应字体缩放又保留固定像素微调能力。
3、calc()中的运算符两侧必须保留空格，否则会导致语法错误且该声明被整体忽略。
