我来帮你搞定这个烦人的空白问题！你的核心困扰是AdSense响应式广告会根据广告库存动态切换尺寸，但你的CSS固定了广告单元的高度，导致当广告显示320x50时，容器还留着100px的高度，自然就出现空白了。这里有几个实用的解决方案：

方案1：让容器自适应广告高度 #

最简单的办法就是去掉固定高度限制，让容器跟着广告的实际高度走。修改你的CSS：

.advertisement {
     display: flex;
     justify-content: center;
     box-sizing: border-box;
     margin: 0;
     /* 删掉固定高度，容器会自动贴合广告 */
}

.horizontal-ad {
    display: block;
    width: 320px;
    height: auto; /* 移除固定height，交给AdSense控制 */
}

这样广告加载后，容器会自动收缩到广告的实际高度，空白自然就消失了。

方案2：指定允许的广告尺寸组合 #

如果你只想让广告在320x100和320x50之间切换，可以在广告单元的HTML里明确指定可选尺寸，配合响应式逻辑：

<aside class="advertisement">
    <ins class="adsbygoogle horizontal-ad"
        data-ad-client="ca-pub-000000000"
        data-ad-slot="0000000"
        data-ad-format="horizontal"
        data-ad-size="320x100,320x50"> <!-- 添加这行指定尺寸组合 -->
    </ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</aside>

再搭配方案1的CSS，AdSense只会在你指定的两个尺寸里选，容器也会自动适配，不会有多余空白。

方案3：用JS监听广告加载动态调整高度 #

如果前两个方法效果不理想，可以试试用JavaScript监听广告加载完成的事件，手动把容器高度改成广告的实际高度：

window.addEventListener('load', function() {
    (adsbygoogle = window.adsbygoogle || []).push({
        onAdLoaded: function() {
            const adElement = document.querySelector('.horizontal-ad');
            if (adElement) {
                // 获取广告实际高度，同步给父容器
                const actualHeight = adElement.offsetHeight;
                adElement.parentElement.style.height = `${actualHeight}px`;
            }
        }
    });
});

这个方法能精准匹配广告高度，彻底解决空白问题。

内容的提问来源于stack exchange，提问作者Peeper