Bootstrap 4中使用PHP include引入DIV文件时上方出现空白求助

问题描述 #

使用PHP include 引入包含DIV标签的文件时，目标DIV上方会出现一行空白。精简测试代码如下：

主文件代码 #

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>

<div class="container">

<div class="row">
  <div class="col">
    Beep 1!
  </div>
</div>
<?php include('test-include.php'); ?>
<div class="row">
  <div class="col">
    Beep 3!
  </div>
</div>

</div>

</body>
</html>

被引入文件 test-include.php 代码 #

<div class="row">
  <div class="col">
    Beep 2!
  </div>
</div>

直接将include语句替换为文件内容时，三个DIV无间距；但使用include命令时，第一个和第二个DIV之间会出现间隙，且各浏览器表现一致。

核心原因 #

问题根源是被引入的test-include.php文件带有UTF-8 BOM头：

• UTF-8 BOM是文件开头的三个不可见字节（EF BB BF），PHP解析时会将其视为普通输出内容发送到浏览器，最终表现为一行空白或间隙
• 直接复制代码到主文件时，BOM头不会被带入，因此无空白问题

解决步骤 #

1. 使用支持编码设置的编辑器（如VS Code、Notepad++）打开test-include.php
2. 将文件编码修改为UTF-8 无BOM：
   • VS Code：点击右下角编码标识，选择「通过编码保存」，再选择「UTF-8」
   • Notepad++：点击顶部菜单「编码」→「UTF-8 无BOM」
3. 保存文件后重新测试即可消除空白

辅助排查方案 #

• 确保主文件中include语句前后无多余换行或空格，避免额外输出
• 临时方案：在PHP脚本开头添加ob_start()开启输出缓冲，结尾用ob_end_clean()清理，但修复BOM头才是根本解决方法

内容的提问来源于stack exchange，提问作者Mat O'Marah