Laravel模板集成布局时出现多余空白，求解决方案

安全阿岳

2026-5-28

问题：Laravel Blade引入布局后页面出现多余空白

我已经创建若干布局并引入至home.blade.php文件中，但在浏览器中查看页面时，每次引入布局都会出现多余空白。以下是我的home.blade.php代码：

<!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <title>@yield('title') - {!! trans('main.site_title') !!}</title> <!-- Favicon--> <link rel="icon" href="{!! URL::to('/') !!}/public/frontend/img/favicon.ico" type="image/x-icon"> <!-- Google Fonts --> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> {{ Html::style('public/frontend/js/bxslider/jquery.bxslider.css') }} {{ Html::style('public/frontend/js/flexslider/flexslider.css') }} {{ Html::style('public/frontend/js/radial-progress/style.css') }} {{ Html::style('public/frontend/css/animate.css') }} </head> <body> @include('frontend.layouts.header') @include('frontend.layouts.slider') @include('frontend.layouts.header_strips') @include('frontend.layouts.news_events') @include('frontend.layouts.share_pics_articles') @include('frontend.layouts.are_you_ready') @include('frontend.layouts.education_great') @include('frontend.layouts.about_statistics') @include('frontend.layouts.quotes') @include('frontend.layouts.sub_footer') @include('frontend.layouts.footer') {!! Html::script('public/frontend/js/breakpoints.js') !!} {!! Html::script('public/frontend/js/jquery/jquery-3.3.1.min.js') !!} {!! Html::script('public/frontend/js/scrollspy.js') !!} </body> </html>

同时附上浏览器截图，恳请帮忙解决该问题！

解决方案建议

针对Blade模板引入布局出现多余空白的问题，我整理了几个常见的排查和修复方向：

检查被引入布局文件的空白字符
这是最常见的原因：每个被@include的布局文件（比如header.blade.php、slider.blade.php等）的开头或结尾可能存在多余的空格、换行，或者PHP闭合标签?>后面的空白内容。Blade会直接输出这些空白到页面中。
建议：
1. 移除所有布局文件末尾的?>标签（PHP允许省略这个标签，能有效避免后续的空白输出）；
2. 检查每个布局文件的开头，确保没有多余的空格或换行。
清除浏览器默认样式或组件CSS边距
浏览器的默认样式（比如body、div的默认margin/padding）或者你自己写的布局组件CSS中，可能设置了不必要的边距，导致视觉上的空白。
可以尝试在全局CSS中添加重置样式：
```
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```
之后再逐个检查每个布局组件的CSS，看是否有额外的margin/padding导致空白。
使用Blade的空白控制语法
Blade提供了空白控制的语法，在指令前后添加-可以消除指令产生的空白。比如把@include('frontend.layouts.header')改成@include('frontend.layouts.header')-，或者在布局文件的内容前后使用@-语法，比如：
```
@-include('frontend.layouts.header')-
```
这样可以减少Blade渲染时产生的空白字符。
排查隐藏的HTML注释或无效标签
有时候布局文件中可能存在隐藏的HTML注释（比如）或者未闭合的标签，这些都可能导致浏览器渲染出额外的空白。可以打开每个布局文件的源码，检查是否有这类无效内容。

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