HTML/CSS页面顶部及链接行空白问题求助

1. 清除全局默认边距
   浏览器默认会给<html>和<body>元素添加margin或padding，这是页面顶部空白的核心原因，先添加以下CSS重置样式：

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

2. 修正ul的盒模型
   设置width:100%时，默认盒模型会让元素宽度加上内边距、边框后超出视口，导致横向空白，给ul添加盒模型设置：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  background-color: rgb(61, 61, 61); 
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  box-sizing: border-box; /* 新增，确保宽度包含内边距和边框 */
}

3. 修复HTML标签错误
   你的代码中第一个<li>标签未闭合，这会导致布局异常，修正后的HTML如下：

<ul> 
  <li><a class="active" href="#">HOME</a></li>
  <li><a href="http://127.0.0.1:5500/ProgettoWeb/portfolio.html" target="_blank">PORTFOLIO</a></li>
  <li><a href="http://127.0.0.1:5500/ProgettoWeb/aboutme.html" target="_blank">ABOUT ME</a></li>
  <li><a href="http://127.0.0.1:5500/ProgettoWeb/contacts.html" target="_blank">CONTACTS</a></li>
</ul>

4. 优化导航项显示（可选）
   如果需要导航项横向排列，添加以下CSS让li和a标签正确布局：

li {
  float: left;
}

li a {
  display: block;
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
}

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