如何修复WordPress页面中随机出现的<hr>、边距及内边距问题

实操步骤 #

• 先查Elementor区块设置：
  进入页面的Elementor编辑器，点选顶部/底部有线条的区块，右侧面板切到「样式」，看看「边框」「分隔符」选项，是不是不小心开启了边框或添加了装饰线，直接关闭即可。
• 替换无效CSS代码（你之前针对hr的代码没用，因为这些线条不是<hr>元素）：
  将以下CSS添加到页面的Elementor自定义CSS（页面设置→高级→自定义CSS）或主题的自定义CSS区域：

  /* 移除顶部区块的边框/阴影 */
  .elementor-section:first-of-type {
    border-top: none !important;
    box-shadow: none !important;
  }
  /* 移除底部区块的边框/阴影 */
  .elementor-section:last-of-type {
    border-bottom: none !important;
    box-shadow: none !important;
  }
  /* 全局排查多余的outline和边框（测试用，生效后可缩小元素范围避免影响正常样式） */
  * {
    outline: none !important;
    border: none !important;
  }
  

• 排查模板/插件冲突：
  若使用了预制模板，检查模板是否自带隐藏装饰元素；临时禁用其他插件，排除插件冲突导致的样式异常。
• 清除缓存：
  修改CSS后，清除WordPress缓存、浏览器缓存，确保新样式正常生效。

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