直接给广告容器加margin或正文段落设margin-bottom/top可生效，但需排除float、absolute定位及内联样式干扰；优先用广告容器class/id控制上下间距，推荐margin: 16px auto 24px；正文p建议只设margin-bottom，用rem单位；Flex/Grid布局中用gap更可靠；动态插入广告需注意class缺失或!important覆盖。
直接给广告容器加 margin 或给正文段落设 margin-bottom/margin-top 就能生效，但必须先确认广告不是用 float、position: absolute 或内联样式硬编码的间距，否则 CSS 会失效。
广告容器本身有 class 或 id 时，优先改它的外边距
多数广告（如 Google AdSense、自建 banner）会被包在 <div class="ad-banner"> 或类似结构里。这时最干净的做法是直接控制这个容器和上下内容的距离：
- 用
margin-top拉开它和上文（比如标题）的距离，用margin-bottom控制它和下文（比如第一个p）的空隙 - 避免只写
margin: 16px—— 如果广告是块级且居中显示，左右 margin 可能导致水平偏移；推荐写成margin: 16px auto 24px; - 如果广告用了
display: inline-block或被父容器设了vertical-align，margin-top可能不按预期起作用，此时要检查 computed styles 中的display和line-height影响
正文段落紧贴广告？别动广告，改 p 的 margin-bottom
很多情况下，广告插在两个 p 之间，而你发现第二个 p 紧贴广告底部——这不是广告“没留空”，而是 p 默认的 margin-bottom: 1em 被浏览器重置或被其他样式覆盖了。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 检查开发者工具里该
p的 computedmargin-bottom是多少，常见坑是：全局重置写了p { margin: 0; }却忘了单独给正文段落补回来 - 推荐只设
margin-bottom（不碰margin-top），这样首段不会在广告上方多出空白，也符合文档流自然顺序 - 用相对单位更稳：
p.article-body { margin-bottom: 1.25rem; }，比px更适配缩放和可访问性设置
广告用 Flex/Grid 布局包裹时，用 gap 更可靠
如果广告和正文同属一个 display: flex; flex-direction: column; 容器（比如 CMS 输出的模块化区块），margin 容易因外边距合并失效，这时 gap 是更可控的选择：
立即学习“前端免费学习笔记（深入）”；
-
gap不会和子元素的margin合并，行为可预测；比如容器设了gap: 32px，广告和它下面那个p之间就一定是 32px - 注意：IE 完全不支持
gap，若需兼容，得回退到给广告加margin-bottom+ 给正文加margin-top的组合写法 - 不要在同一个容器里混用
gap和大量子元素margin，调试时很难分清哪部分在起作用
最容易被忽略的是广告加载后动态插入 DOM 导致的样式脱节——比如 JS 插入的广告容器没 class，或者用了 !important 写死的内联 style，这时候外部 CSS 的 margin 会被无视。遇到这种情况，要么改 JS 注入逻辑，要么用属性选择器（如 div[role="banner"]）或 :has()（仅现代浏览器）做兜底匹配。
