分享phpcms页面留白过大修复方法 新手也能轻松搞定

咱就是说，做phpcms站点的兄弟，谁没遇见过页面留白大得离谱的情况？我前两年帮客户做企业站，套了个网上找的免费模板，本地调的时候好好的，一上线打开一看，嚯，左右留白加起来比内容区还宽，从上往下看，底部空了一大块能放三个产品轮播，客户当时直接给我打语音：“小X你这页面是没吃饱饭吗？怎么空落落的像我家毛坯房”，给我整得脸都红了。

接下来那两天我搜遍了各种论坛，试了七八种方法，踩了不知道多少坑，终于摸出了几套靠谱的phpcms页面留白过大修复方法，今天全给你唠出来，我过来人踩过的坑，你就别再踩了，都是免费的经验，拿过去用就行。

先搞懂：你的phpcms为啥会留白过大？

我把留白过大这事比作你买衣服买大了一码，本来穿M码正好，你买了XL，穿身上空荡荡的，哪里都漏风，对应到phpcms里，无非就是三个地方出问题，我给你掰扯清楚：

• CSS自带的边距padding/margin没调，相当于衣服出厂自带的宽边衬你没剪，留着当然空一块；
• 响应式适配写错了，不同分辨率下容器宽度设太小，相当于你170的个子穿185的衣服，可不空荡荡嘛；
• 内容调用标签写错漏了，本该放内容的地方没调用，空着那不就是留白，相当于商家少给你缝了前片，衣服当然空一大块。

亲测好用的phpcms页面留白过大修复方法，一步步来

别慌，不管啥原因，按我这三步走，百分之九十的问题都能解决，我已经帮N个朋友搞定过这个问题了，绝对靠谱。

第一步：先查全局CSS，90%的问题都出在这

很多新手套模板的时候，根本不会看模板自带的CSS，人写啥你就用啥，人家为了演示效果加了大边距，你直接拿来用，留白能不大吗？

我教你最笨也最准的方法：先打开你的网站，按F12调出开发者工具，点一下留白的位置，直接就能看到是哪个元素占了空，我之前傻呵呵改了半小时代码，结果F12一点，就是body默认加了20px的外边距，合着我白忙活半天，这步真的省时间。

一般常见的问题就是容器的padding或者margin设太大了，比如你会看到类似这样的代码：

``` .container { width: 1100px; margin: 0 auto; padding: 60px 30px; } ```

你看这padding上下左右各几十px，加起来留白能不大吗？把左右padding改成0，上下padding按你的需求改成10px或者20px，保存之后刷新，立马就能看到留白少了一大块。这绝对是最最简单的phpcms页面留白过大修复方法，新手看一遍就能会。

第二步：检查响应式断点，别让小屏幕留大空

现在谁的站点不是响应式的？但是很多人写媒体查询的时候，随手就给容器加了边距，结果手机端打开，左右各空一块，留白大得离谱。我之前就遇到过一个朋友，电脑端看着好好的，手机打开内容只占中间一半，剩下全白，就是这个问题。

怎么修？很简单：把所有分辨率断点下的最外层容器宽度都设成100%，去掉不必要的左右外边距和内边距，比如很多人会在小于768px的断点里写width: 80%，剩下20%全给留白了，改成width: 100%不就完了？

要是你遇到的是横向留白，改完这个基本就没了，这也是我常用的phpcms页面留白过大修复方法，别看着简单，真的解决大问题。

第三步：检查内容调用标签，别漏调用模块

这个坑是我刚学phpcms的时候踩过的，当时我删模板里多余的广告代码，手滑把内容调用的{pc}标签给删了，本该放推荐产品的位置啥都没有，下半页全是空的，留白大得吓人，我找了一下午才发现问题，给我整得都想卸软件了。

所以如果你是上下留白过大，一定要检查：对应页面的模板里，内容调用标签是不是完整，有没有漏调用头部、侧栏、底部这些模块，比如首页本来要调用幻灯片、推荐内容、新闻列表，结果你漏了两个，那可不就空一大块吗？把标签补对，调用回内容，留白立马就填好了，这也是很多人会忽略的phpcms页面留白过大修复方法，别不当回事。

改完还不行？给你两个兜底招

要是你改完上面三步还有留白，别慌，我还有两个压箱底的招，都是过来人试了N次的，绝对好用：

第一招：改完一定要清phpcms缓存！phpcms这个缓存我太懂了，你改完模板，不清缓存前台显示的还是旧页面，你改半天白改，就像你换了新衣服，镜子还是之前的旧镜子，当然看着不对。改完代码直接去后台找“更新缓存”，点一下全更，再刷新前台看，很多问题直接就没了。说真的，这步没做，再好的phpcms页面留白过大修复方法也没用，一定要记住！

第二招：删无用空元素，加代码收留白。很多免费模板自带一堆没用的空div，就是用来占位的，忘了删，就会导致底部留白过大，你直接F12找到那个空div，去模板里删掉就好。要是是横向的莫名其妙留白，直接给全局加一行css就搞定： ``` html, body { overflow-x: hidden; } ``` 这行代码直接把超出的横向留白切掉，基本都能解决问题。

其实说白了，phpcms页面留白过大真不是啥疑难杂症，不用愁得睡不着觉，按我给你说的这几个phpcms页面留白过大修复方法一步步来，新手也能搞定。我作为过来人，踩了这么多坑，就是想让你少走点弯路，不用像我当初一样搜一下午教程还搞不定。

做站嘛，不就是遇到一个问题解决一个问题，解决完这个phpcms页面留白过大，下次再遇到你就是老师傅了，只要肯动手试，哪有搞不定的事？祝你一次就修好，加油呀！