页面主体用 Elementor 搭,底部评论区用区块,结果正文段落间距从 32 像素变成 64 像素,标题下方多出一段空白,编辑器里看还是正常的。乍看像缓存或者权限的锅,追下去往往不是。
.entry-content .wp-block-paragraph { margin-block: 1rem; }
.elementor-widget-text-editor p { margin-block: 0; }
/* 两处只留一处生效 */
追下去是这么回事:主题给 .wp-block-paragraph 和构建器的文本小工具各写了一套 margin,混排时两套规则同时作用,外边距叠加。区块的全局样式又用了 :where 降低优先级,很难覆盖。
「构建器区块混用」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。
具体做法是,在开发者工具里量段落的 margin,确认是两套规则叠加;把主题对区块的段落 margin 限制在 .entry-content 内部,别影响构建器区域;统一用一套间距变量,两处读同一个值。
验收就看一点,混排页面的段落间距回到 32 像素,标题和正文之间不再多出空白。
