帝国CMS模板页面留白过多显空荡？亲测有效解决方法汇总

你有没有发现刚套完帝国CMS模板的时候，首页或者内容页上下左右空出一大块？要么是导航和banner中间空半屏，要么是内容结束到页脚的距离能塞下三四个广告位，咋看咋别扭，用户点进来还以为你页面没加载完直接就跳走了。

先排查是不是全局样式的padding/margin搞的鬼

很多人一上来就改模块代码，折腾半天才发现是公共css里给body或者.page-wrapper这种外层容器加了默认的上下边距，完全是白忙活。你直接打开浏览器F12，鼠标点到留白的位置，看右侧盒模型的数值，要是外层容器有多余的margin-top或者padding-bottom，直接改就行。

记得改完要去帝国CMS后台清缓存，还要刷新静态页，不然你改半天前台也不生效，白浪费时间。

常见的默认样式代码长这样，直接对应改数值就行：

```css / 很多模板默认会加这个，直接把数值改成0或者你要的大小就行 / body{ margin: 30px 0; padding: 0; } .page-container{ padding: 50px 0; } ```

模块与模块之间的留白，优先调栏目配置别硬改代码

尤其是用了灵动标签调用列表、轮播这些模块的，很多模板作者会在标签里加默认的margin参数，你改css不如直接去对应模板的灵动标签里调参数更快。就比如你列表块和下面的推荐块中间留白太多，直接看调用标签里的class是不是带了mb-50这种间距类，改成mb-20或者直接删掉就行，比你重新写css覆盖要省事多了。

别不信，我之前帮客户改个站，他硬改了3个css文件都没生效，结果就是灵动标签里嵌了个内联样式，删了10秒钟搞定。

内容页的留白要分情况调，别一刀切

正文上下留白

内容页正文上面和导航的距离，还有正文结束到相关推荐的距离，大多是内容页模板里的article标签自带的边距，F12一瞅就看得到，改对应数值就行。要是你有的文章内容短有的长，留白落差特别大，可以给article加个min-height属性，最短也能撑到你要的高度，不会短文章下面空一大块。

侧边栏留白

很多人侧边栏高度比主内容矮，下面就空出一大块巨难看，直接给侧边栏加个height:100%，或者用flex布局让两边高度自动对齐，几行代码的事，页面瞬间就规整了。

改完记得多测几个页面，首页、列表页、内容页、单页都点一遍，还有手机端也要瞅一眼，别PC端改好了移动端又多出一堆留白，那就尴尬了。其实帝国CMS模板的留白问题90%都不是啥大毛病，大多是默认参数没调对，不用上来就大改模板源码，先按上面的方法排查，基本10分钟就能搞定。