亲密性本质是视觉归属判断，需通过三组距离比例（如3:1）引导人眼自动分组，错误设置会干扰用户认知路径，导致误读逻辑或点错按钮。
亲密性不是加 margin 或 padding 就完事——它本质是视觉归属判断，浏览器不认这个，但人眼会自动分组。做错会导致用户读错逻辑、点错按钮、忽略关键信息。
亲密性失效的典型错误现象
常见表现包括：h2 和紧随其后的 p 间距过大，反而和下一段 p 距离更近；操作按钮紧贴文字，没有留出可点击区域的呼吸感；图片两侧空白过宽，割裂了图与标题的语义关联。这些都不是“不好看”的问题，而是用户认知路径被干扰的信号。
用 CSS 控制亲密性必须盯住的三个距离
所有亲密性效果都靠这三组距离的相对关系成立：
-
margin-bottom（标题与正文）应明显小于margin-top（本单元与上一单元） -
margin-bottom（日期与标题）应小于margin-top（日期与正文） -
margin-top（按钮与前文）应大于margin-bottom（按钮自身内容区）
例如：一个 h3 后跟 p，若设 h3 { margin-bottom: 16px; }，那 p 的 margin-top 必须 ≤ 8px；而相邻两个 section 之间则建议 ≥ 40px。
HTML 结构如何配合亲密性原则
结构混乱会让 CSS 调整事倍功半：
- 避免用多个孤立
div拼凑一个视觉单元，改用语义化包裹：比如把h2+p+time放进同一个article或section - 操作按钮不要和文字混在同一个
p里，应单独用div或footer包裹，并设置统一margin-top - 图片若属于某段正文，就别让它脱离该
section的 DOM 流，否则margin容易失控
亲密性最易被忽略的点：它不依赖像素值本身，而依赖比例差。12px 和 16px 的差距不够，但 16px 和 48px 的对比就能触发分组判断——这个阈值因人而异，但 3:1 是较稳妥的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
