删掉页面底部一个 CTA 容器,前台底部还是空出 120 像素,检查元素面板里那块区域没有任何内容,删了三次空白还在。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
document.querySelector('.elementor-section:last-child')
.style.marginBottom
// 非空就是它在撑高度
容器的 margin-bottom 写在父级 section 上,删子元素不会带走父级间距。页面设置里的 padding-bottom 也可能还留着旧值,构建器预览不显示这段空白。这一点先确认清楚,后面就不用反复试。
「Elementor 删除留白」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
具体做法是,用开发者工具选中空白区域,看是哪一层的 margin 或 padding;把父级 section 的底部间距清零,别只删子容器;检查页面设置的 Advanced 里 padding 是否还有旧值。
改完照着核一遍,页面底部紧贴页脚,空白区域消失,滚动条高度同步变短。
