justify-content: space-between没反应的根本原因是HTML结构不满足Flex规则：img/a默认inline、父容器含空格或包裹层、子项设float/absolute脱离文档流；gap更稳但仅在flex/grid中生效。
flex容器里用justify-content: space-between为什么没反应
根本不是CSS写错了，而是HTML结构没对上Flex的规则。常见失效场景有三个：img、a这类元素默认是display: inline，放进display: flex父容器后，浏览器仍按“行内内容”处理，不认作Flex子项；父容器里夹了换行符、空格或多余div包裹层，Flex只认**直接子元素**；子元素自己加了float或position: absolute，直接脱离文档流，Flex完全失效。
gap比margin更稳，但只在flex/grid里生效
gap是目前最干净的等间距方案，但它有硬性前提：父容器必须是display: flex或display: grid。其他布局（比如block、inline-block）下gap完全被忽略。gap: 12px表示所有相邻子项之间都是12px，首尾项与容器边缘**没有额外间隙**——这点和space-between不同，但更可控。需要兼容老Safari（≤15.4）时，得加-webkit-gap: 12px，否则空白会消失。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
纯HTML结构受限时，只能靠margin + :nth-child
当CMS输出固定HTML、不能改父容器为flex、又得兼容IE时，只能手动用margin。给每个a统一设margin-right: 20px，再用:nth-child(last-of-type) { margin-right: 0 }清掉最后一个右外边距。垂直方向建议用margin-bottom，因为块级元素上下margin会合并，容易出错。避免写margin: 0 20px这种简写——首尾都会多出20px，视觉上变成“两端空太多”。如果链接数量不固定（比如动态菜单），纯CSS很难精确控制，这时就得靠JS补位或倒逼结构改用gap+flex-wrap。
真正容易被忽略的是：等间距 ≠ 等视觉节奏
图片宽高不一、字体行高不同、甚至vertical-align的默认值，都会让“数学上等距”的链接看起来歪斜或松紧不一。动手前先检查所有a是否都设了box-sizing: border-box，有没有意外的基线对齐干扰，以及hover时边框是否因换行而顶到文字边缘——多行链接的padding表现和单行完全不同，这点常被跳过验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
