如何避免Laravel Blade编译生成的HTML出现多余空格

你遇到的这个现象，从根上就和Blade模板、Chrome渲染bug没关系：

• 你在Dev Tools里看到的带大量空格的混乱结构，是Chrome对DOM的展示策略导致的：它会把源码里所有的换行、缩进形成的空白文本节点直接展示在树结构里；而Firefox默认会把这类无意义的空白节点隐藏，所以你看Firefox的Dev Tools会觉得干净。两家浏览器对同一份HTML的实际页面渲染效果完全一致，不存在显示上的差异。

最容易被忽略的点：Dev Tools的DOM树展示是浏览器解析后自动格式化的结果，根本不是服务端返回的原始HTML源码。就算你费尽心机把所有模板写成无换行的单行形式，Chrome打开后还是会自动给DOM树加缩进、拆行展示，你之前以为“单行写法在Dev Tools里会变整洁”的效果根本不会出现，完全是做无用功。

• 如果你是真的遇到了inline、inline-block元素排版时莫名其妙多出空隙的问题（不是Dev Tools看着乱，是实际页面布局不对）：别靠删代码换行解决，直接用CSS处理：
  • 给元素父容器设置display: flex，从布局模型上彻底消除元素间的默认空白间隔
  • 给父元素设置font-size: 0，再给子元素单独设置需要的字号，直接把空白文本节点的渲染值折成0
  • 给相邻元素写明确的外边距规则，不依赖代码换行产生的默认间隔
• 如果你确实需要让Blade编译出的原始HTML不带冗余空白，完全不需要牺牲模板可读性：
  • Laravel 9及以上版本，直接在config/view.php里加配置'trim' => true，Blade编译器会在编译阶段自动去掉模板里的连续换行、行首缩进，你写模板该怎么缩进怎么缩进，一点不影响平时的开发习惯
  • 低版本Laravel可以装个轻量的Blade编译压缩扩展，在模板生成的阶段就把冗余空白过滤掉，不需要你动手改模板的写法
• 说句实在的：HTML规范本来就规定，页面里的连续空白（换行、缩进、多个空格）在渲染时会被自动折叠成单个空格，这类空白根本不会影响最终用户看到的页面效果，Dev Tools看着乱不乱完全是工具的展示问题，为了这个把模板写得全挤在一行，反而会让后续维护的人骂娘。

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