Footer元素对齐异常求助：footer2中的Item1出现未手动设置的左外边距

你碰到的这个左间距问题，根源其实很简单——浏览器给<ul>标签自带了默认的padding-left内边距，哪怕你用list-style: none去掉了列表符号，这个默认样式还是会保留下来，导致第一个Item看起来有左外边距。

解决方案 #

只需要给.footer2下的ul重置这个默认内边距即可，修改后的CSS代码如下：

.footer1, .footer2 { 
  width: 100%; 
  background: rgb(243, 242, 242); 
}
.footer2 ul { 
  display: flex; 
  padding-left: 0; /* 新增此行，清除浏览器默认内边距 */
}
.footer2 ul li { 
  list-style: none; 
}

额外提示 #

如果在项目中经常遇到这类由浏览器默认样式引发的布局问题，建议在代码开头添加一段基础CSS重置，比如：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, ol {
  list-style: none;
}

这样能统一清除所有元素的默认边距、内边距，以及列表的默认样式，避免后续再出现类似的意外布局。

内容的提问来源于stack exchange，提问作者Pranshu Kashyap