推荐用 margin + :last-child 重置或 gap 属性实现同级元素间距：普通流用 p{margin-bottom:16px}p:last-child{margin-bottom:0}，Flex/Grid 容器直接设 gap:16px。
用 CSS 的通用兄弟选择器（~）无法直接实现“同级元素统一加间距”，因为它只匹配**某个元素之后的所有同级兄弟元素**，不是给每个元素都加间隔。真正常用且简洁的方式是：对所有同级元素统一设置 margin，再用 :first-child 或 :last-child 去掉首/尾的多余间距。
推荐写法：统一设 margin + 重置首项或末项
假设你要给同一父容器下的所有 p 标签之间加 16px 垂直间距：
p {
margin-bottom: 16px;
}
p:last-child {
margin-bottom: 0;
}这样每个 p 都有向下的间距，但最后一个不加，视觉上就是两两之间有 16px 空隙。
也可以反过来写（更兼容旧浏览器）：
立即学习“前端免费学习笔记（深入）”；
-
p:not(:first-child) { margin-top: 16px; }—— 从第二个开始，每个都加顶部间距
为什么不用通用兄弟选择器（~）？
~ 是“某元素之后的所有同级兄弟”，例如：
h2 ~ p { color: red; }意思是：所有在 h2 后面出现的 p 元素（不管隔几个标签）都变红。它不适用于“每个元素自己控制间距”，也无法批量作用于“每一对相邻元素”。
想用 ~ 模拟间距？理论上可以这样写（不推荐）：
*:not(:last-child) ~ * {
margin-top: 16px;
}但这会导致严重叠加：第 2 个元素被第 1 个影响一次，又被第 1、2 个共同影响多次，实际 margin 会远超预期，不可控。
更现代、更灵活的方案：gap 属性（推荐用于 Flex/Grid）
如果这些同级元素在 Flex 或 Grid 容器中，直接用 gap 最干净：
.container {
display: flex;
flex-direction: column;
gap: 16px;
}或
.container {
display: grid;
gap: 16px;
}gap 专为“项目间间距”设计，不会影响首尾外边距，也不用额外重置，语义清晰、兼容性良好（现代浏览器全覆盖，包括 iOS Safari 14.5+）。
小结：按场景选最合适的
- 普通流式同级元素（如多个
div、p）→ 用margin + :last-child或:not(:first-child) - Flex/Grid 布局 → 优先用
gap，简洁可靠 - 避免用
~实现间距，逻辑反直觉、易出错、难维护
