移除导航栏空白求助：我的HTML代码为何出现顶部左侧空白？

算力阿峰

2026-5-19

解决导航栏顶部和左侧空白的问题

嘿，别担心，这个问题在新手刚接触CSS布局时超常见！你的导航栏出现顶部和左侧空白，核心原因是浏览器默认给body和ul元素添加了margin/padding样式，这些默认样式干扰了你的fixed导航栏布局。

具体解决方案：

重置body的默认margin和padding：大多数浏览器会给body设置8px左右的默认margin，这就是顶部和左侧空白的主要来源。
重置ul的默认padding：浏览器默认会给ul添加padding-left，导致导航菜单向右偏移，破坏布局。

修改后的完整CSS代码：

/* 重置浏览器默认样式 */
body {
  margin: 0;
  padding: 0;
}

div.nav { 
  background-color: black; 
  color: white; 
  font-size: 20px; 
  font-weight: bold; 
  position: fixed; 
  width: 100%; 
  text-align: center; 
  /* 加上top:0确保导航栏完全紧贴视口顶部 */
  top: 0;
}

ul { 
  margin: 0;
  padding: 0;
}

li { 
  display: inline-block; 
  list-style: none; 
}

li a { 
  padding: 15px; 
  color: white; 
  /* 去掉链接下划线，让导航更美观 */
  text-decoration: none;
}