如何消除网站页脚下方的白色间隙 附CSS代码求解决方案

你现有代码存在语法问题+默认样式未重置，是导致白色间隙的核心原因，按以下步骤修复即可：

• 首先修复CSS语法错误：你贴出的代码最后一条样式规则缺失闭合大括号，会导致浏览器样式解析异常，必须补上。
• 重置浏览器默认边距：多数浏览器会给html/body默认添加8px外边距、给ul列表默认添加上下外边距，你现有代码没有清除这部分默认样式，是空白出现的高频诱因。
• 清除页脚相关容器的意外边距：给页脚、内部容器、子模块统一加上边距清零规则，覆盖其他全局样式带来的意外边距。

修复后的完整可用CSS代码如下：

/* 全局默认边距重置，放在所有CSS最开头即可 */
html, body {
  margin: 0;
  padding: 0;
}

#footer-copyright{
    background:#242634;
    display:block;
    overflow:hidden;
    width:100%;
    color:#aaa;
    padding:20px 0;
    margin: 0; /* 强制清除页脚自身外边距 */
}
#footer-copyright > .container{
    margin:0 auto;
    padding: 0; /* 清除内部容器默认内边距 */
}
#social-footer{
    float:right
}
#social-footer .widget{
    line-height:30px;
    margin: 0; /* 清除侧边组件默认外边距 */
}
.social-footer ul{
    text-align:center;
    overflow:hidden;
    display:block;
    margin: 0; /* 清除ul默认上下外边距 */
    padding: 0; /* 清除ul默认左侧内边距 */
}
.social-footer ul li{
    display:inline-block;
    overflow:hidden;
    margin:0 0 0 14px
}
.social-footer ul li a{
    font-size:16px;
    color:#aaa;
    overflow:hidden;
    display:block;
    padding:0 3px;
    transition:color .17s ease
}
.social-footer ul li:last-child a{
    padding-right:0
}
.social-footer ul li a:hover{
    color:$(main.color)
}
#footer-copyright .copyright-area{
    float:left;
    font-size:12px;
    line-height:30px;
    margin: 0; /* 清除版权区默认外边距 */
}
#footer-copyright .copyright-area a{
    color:$(main.color)
}
#footer-copyright .copyright-area a:hover{
    text-decoration:underline
} /* 原有代码缺失的闭合大括号，必须补上 */

如果替换代码后仍存在空白，按以下方向排查：

• 检查页脚上方紧邻的内容区块是否设置了过大的margin-bottom，如果有将其改为padding-bottom即可避免浮动布局下的边距穿透问题
• 如果是页面最底部的固定白边，检查页脚外层的包裹容器是否设置了多余的padding-bottom，或是页面min-height计算值偏差，直接移除对应多余属性即可
• 若存在其他高优先级样式覆盖，可以给#footer-copyright追加margin-bottom: 0 !important强制覆盖意外下边距

内容的提问来源于stack exchange，提问作者Nearest Business