广告位间距问题主因是混淆margin与padding、忽略默认样式及外边距合并；margin控容器间距离，padding控内容与边框距离；需注意box-sizing、行内元素显示模式、BFC触发、flex gap、vertical-align及响应式单位选用。
广告位间距调不准，八成是把 margin 和 padding 混用了，或者没处理浏览器默认样式和外边距合并。
广告容器的 margin 与 padding 到底该用哪个
关键看空隙归属：你想推远的是「广告块和其他元素」，还是「广告内容和广告框边缘」。
-
margin用于控制广告容器（比如<div class="ad-banner">）和上下文（如正文、导航栏、页脚）之间的距离 <li> <code>padding用于撑开广告内部图文与边框的距离——比如让 banner 图片不贴着容器边缘，或让文字广告留出呼吸感 - 对广告容器设
padding后，若未加box-sizing: border-box，会导致总宽度超父容器，尤其在响应式布局中容易触发横向滚动条 - 行内广告（如
<ins></ins>或<span class="ad-unit"></span>）设margin-top/margin-bottom基本无效，得先加display: inline-block或block - 只给下方广告设
margin-top，或统一只设margin-bottom，再用:first-child和:last-child清除首尾冗余 - 更稳的解法：给广告父容器加
overflow: hidden、border: 1px solid transparent或padding: 1px，触发 BFC 阻止子项 margin 外溢 - 如果广告是 Flex 子项，直接上
gap，它不合并、不依赖方向、写法干净：.ad-container { display: flex; flex-direction: column; gap: 24px; } -
<img>类广告默认按baseline对齐，下方预留字母下伸空间；加vertical-align: bottom或middle即可消除 -
<iframe></iframe>同理，建议统一加vertical-align: top，避免与周围文本错位 - HTML 源码中广告标签间的换行/空格也会被渲染为约 4px 空隙；删掉
<div class="ad"></div> <div class="ad"></div>中的换行，或给父容器设font-size: 0（记得给广告内文字单独恢复字号） - 某些广告 SDK 注入的 iframe 自带内联
style="margin: 0;"，需用!important覆盖，或改用 CSS 层叠权重更高的选择器 -
padding的百分比值永远以父容器宽度为基准，哪怕你写的是padding-top: 10%—— 这在横幅广告高度需随宽度变化时反而是优势（例如padding-top: 56.25%做 16:9 容器） - 推荐组合：
margin用rem（配合根字体缩放）、gap用em（跟随上下文字号），再通过媒体查询阶梯调整：@media (max-width: 768px) { .ad-container { gap: 12px; } } - 避免对广告容器设
width: 100%+ 大padding+box-sizing: content-box，三者叠加极易导致水平溢出
相邻广告块垂直间距突然变小？检查 margin 合并
两个连续的广告容器（如两个 <div class="ad-slot">）都设了 <code>margin-bottom: 20px，实际间距却只有 20px 而不是 40px——这是标准的垂直外边距合并行为，不是 bug。
广告嵌入正文时底部有奇怪空白
常见于 <img> 或 <iframe></iframe> 广告紧贴段落下方时，即使设了 margin-bottom: 0，仍有约 4px 缝隙——这通常不是 margin 问题，而是行内对齐残留。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
响应式广告间距适配要点
固定像素值（如 margin: 16px）在小屏上容易挤占内容区域，大屏又显得稀疏；但盲目用百分比也有坑。
真正难的不是写对某一行 CSS，而是在广告加载延迟、第三方样式注入、多层嵌套容器的现实场景里，一眼识别出空隙来自哪一层 margin、谁在合并、谁被 line-height 暗中干扰。调试时优先打开开发者工具的 computed styles 面板，盯着 margin-top、margin-bottom 和 collapsing margins 这几项看。
