如何移除或调整网页周边空白，降低空白区域厚度？

你当前代码中ul标签使用了固定宽高+绝对居中的布局逻辑，当浏览器视口尺寸大于ul的固定宽（955px）高（450px）时，就会自动在四周生成均等留白，这是空白出现的根本原因。你可以根据需求选择以下两种方案修改：

方案1：完全移除周边空白，让内容铺满整个浏览器视口 #

修改对应CSS属性即可：

/* 修改ul原有样式 */
ul {
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  /* 宽高设置为视口100%，占满整个窗口 */
  width: 100vw;
  height: 100vh;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 1px 1px 3px 1px;
  /* 移除原有居中margin和right/bottom定位 */
  margin: 0;
}

/* 修改li原有样式，高度适配父容器 */
li {
  position: relative;
  width: 20%; /* 5个li默认各占20%宽度，和原逻辑一致 */
  height: 100%;
  float: left;
  border-left: 1px solid white;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all 0.7s;
  box-shadow: -2px 0 10px 2px;
  border-color: rgb(0, 0, 0);
}

/* 修改img原有样式，自适应父容器且不变形 */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 修改hover宽度为百分比，适配任意视口尺寸 */
ul:hover li {
  width: 8%;
  cursor: pointer;
}

ul li:hover {
  width: 68%;
}

方案2：自定义空白厚度，自主控制周边留白大小 #

不需要设置固定宽高，直接通过ul的定位偏移量控制留白厚度即可，以下示例实现四周各留20px空白，可自行调整数值修改厚度：

ul {
  position: absolute;
  /* 上下左右偏移量就是对应方向的留白厚度，可自行修改数值 */
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  list-style: none;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 1px 1px 3px 1px;
  margin: 0;
}

/* 其余li、img、hover相关样式和方案1保持一致即可 */

原页面效果参考：

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