移动端Media Query UI异常：导航栏列表出现空白，未添加padding与margin

以下是几种常见的排查方向和解决方法，你可以逐一尝试：

• 重置列表默认样式：浏览器会给<ul>、<ol>标签默认添加padding-left（通常为40px），这是很容易被忽略的默认样式。直接在Media Query里显式重置：

  nav ul {
    padding-left: 0;
    margin: 0;
  }
  nav li {
    margin: 0;
    padding: 0;
  }
  

• 统一盒模型计算方式：如果元素的box-sizing未设置为border-box，即使你设了padding为0，元素的实际宽度计算可能仍会包含内边距，导致视觉上的空白。全局或针对导航栏设置：

  * {
    box-sizing: border-box;
  }
  

• 检查父容器布局属性：如果导航栏用了flex或grid布局，父容器的gap属性会直接产生元素间的空白，需要在移动端Media Query里将gap设为0：

  nav .nav-container {
    gap: 0;
  }
  

• 排查伪元素干扰：有些自定义样式或框架会给列表项添加:before/:after伪元素，可能携带空白或占位内容。可以强制清除：

  nav li::before, nav li::after {
    content: none;
    padding: 0;
    margin: 0;
  }
  

• 消除HTML文本间隙：如果HTML中列表项之间有换行或空格，在inline-block或行内布局下会产生空白。可以将<li>设为display: block，或者把列表项连写（如<li>首页</li><li>关于</li>），也可以给父容器设置font-size: 0，再给子元素重置font-size。

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