如何去除CSS导航栏布局中的边角空白？

架构老林

2026-5-27

解决网页边角空白的问题

嘿，我一眼就看出你遇到的是浏览器默认样式搞出来的小麻烦！那些边角空白其实是浏览器给<body>、<html>还有列表元素自带的默认边距/内边距导致的，咱们一步步把它干掉：

1. 重置全局默认边距与内边距

首先给<html>和<body>清零默认的margin和padding，这是最核心的一步：

html, body {
  margin: 0;
  padding: 0;
}

2. 修复导航列表的默认样式

你的<ul class="primary-nav">也自带浏览器默认的外边距、内边距，还有列表圆点，咱们一起处理掉：

.primary-nav {
  float: right;
  margin: 0; /* 移除默认外边距 */
  padding: 0; /* 移除默认内边距 */
  list-style: none; /* 去掉列表前的圆点 */
}

修改后的完整CSS代码

把这些修改整合到你的代码里，最终的CSS应该是这样：

.grouping:before, .grouping:after { 
  content: " "; 
  display: table; 
} 
.grouping:after { 
  clear: both; 
} 

html, body {
  margin: 0;
  padding: 0;
}

nav { 
  background-color: white; 
  position: fixed; 
  top: 0px; 
  right: 0px; 
  left: 0px; 
} 
nav figure { 
  position: absolute; 
} 
img { 
  width: 100px; 
} 
.primary-nav { 
  float: right; 
  margin: 0;
  padding: 0;
  list-style: none;
} 
.primary-nav>li { 
  display: block; 
  float: left; 
} 
.primary-nav>li>a { 
  float: left; 
  padding: 25px 0; 
  width: 100px; 
  border-left: 1px solid; 
} 
nav li a { 
  font-family: Arial, Helvetica, sans-serif; 
  color: black; 
  text-transform: uppercase; 
  font-size: 15px; 
  text-align: center; 
} 
nav li:first-child a { 
  border-left: none; 
} 
nav li a:focus, nav li a:hover { 
  background-color: red; 
} 
body { 
  background-color: grey; 
}