WordPress产品页面空白移除求助：文本与图片无法同行对齐

问题定位 #

文本与图片间的空白通常由CSS的外边距（margin）、内边距（padding）或元素默认排版样式导致，常见于WordPress主题自带样式、WooCommerce这类电商插件的布局规则。

解决步骤 #

• 定位空白来源：按下F12打开浏览器开发者工具，选中空白区域对应的元素，在右侧样式面板查看margin、padding属性，找到触发空白的具体规则。
• 添加自定义CSS：进入WordPress后台「外观-自定义-额外CSS」，根据定位到的元素选择器添加调整代码，示例如下：

  /* 移除图片与文本间的顶部空白 */
  .product img + .woocommerce-product-details__short-description {
      margin-top: 0 !important;
      padding-top: 0 !important;
  }
  /* 让图片与文本垂直居中对齐 */
  .product img {
      vertical-align: middle;
  }
  

• 检查主题/插件设置：部分电商插件（如WooCommerce）在产品编辑页有布局选项，可查看是否有「图片与文本对齐」相关设置，直接调整即可。

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