CSS/HTML新手求助：导航栏与Header背景、高度对齐异常问题

核心问题梳理 #

• 导航栏与Header背景色视觉不一致：浏览器默认给<ul>添加了margin，导致导航区域和Header上下出现空隙，露出body背景
• 导航与Logo高度不匹配：Header设了固定高度，但内部元素未垂直居中，导航链接的内边距也未适配Header高度

修复后完整代码 #

CSS 代码

/* 重置浏览器默认边距与盒模型，避免布局冲突 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
   font-family: sans-serif;
}

header{
    background-color: #14597f;
    height: 60px;
    /* Flex布局实现内部元素水平分布+垂直居中 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px; /* 避免元素贴紧屏幕边缘 */
}

/* 控制Logo高度，防止超出Header */
.logo {
  height: 45px;
  width: auto; /* 保持图片原比例 */
}

nav ul{
    list-style: none;
    text-align: right;
}
nav li{
    display: inline-block;
}
nav a{
    color: #ffff;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    padding: 17.5px 10px; /* 适配Header高度，保证文字垂直居中 */
    text-decoration: none; /* 去掉默认链接下划线 */
}
nav a:hover{
    background-color: #ca0ed1 ;
}

.active{
    background-color: #1fb5e9;
    border-radius: 4px;
}

HTML 代码（仅需确保Logo的class正确，你的现有代码已满足）

<header>
    <a href="./index.html" >
      <img class="logo" src="assets/img/logo.svg" alt="logo" width="200px">
    </a>
    <nav> 
      <ul>
        <li><a class="active" href="index.html"> Accueil</a></li>
        <li><a href="products.html"> Produits</a></li>
        <li><a href="contact.html"> Contact</a></li>
        <li><a class="shopping-cart" href="./shopping-cart.html" title="Panier">
              <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
                <i class="fa fa-shopping-cart fa-stack-1x"></i>
              </span>
              <span class="count">3</span></a>
        </li>
      </ul>
    </nav>
  </header>

关键修改说明 #

1. 全局样式重置：消除浏览器默认的margin和padding，解决导航区域与Header的空隙问题
2. Header Flex布局：让Logo和导航栏自动水平分布并垂直居中，彻底解决高度对齐问题
3. Logo高度控制：固定Logo高度避免超出Header，同时保留宽高比保证图片不拉伸
4. 导航链接内边距调整：通过上下内边距让链接高度适配Header，视觉上与Logo保持一致

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