如何用HTML和CSS实现导航栏全屏无内边距显示？

兄弟，太懂这种调样式卡半天的憋屈了！你说设了padding: 0还是没效果，大概率是这几个常见的“隐形坑”在搞鬼，我给你捋几个排查方向：

• 先清掉浏览器默认样式
  大部分浏览器会给body、html甚至部分标签自带默认的margin或padding，直接覆盖你的设置。先加个全局重置样式：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  这里的box-sizing: border-box特别重要——它能让元素的padding和border不会撑开元素宽度，避免出现“明明设了100%宽度却超出屏幕”的情况。

• 单独重置body的默认边距
  有些浏览器的body自带默认margin（比如Chrome是8px），就算加了全局重置，也可以单独再确认下：

  body {
    margin: 0;
  }
  

• 确保Header本身占满视口
  别只依赖width: 100%，如果父元素有隐藏的内边距，100%会受父元素限制。改用视口宽度单位更稳妥：

  header {
    width: 100vw; /* 直接占满整个浏览器视口宽度 */
    padding: 0;
    margin: 0;
    background-color: #333; /* 加个背景色方便直观查看效果 */
  }
  

• 检查Header内部的嵌套元素
  有时候不是Header本身有内边距，而是里面的nav、ul这类子元素自带padding或margin，比如默认的列表ul会有左边内边距，记得一起重置：

  header nav,
  header ul {
    padding: 0;
    margin: 0;
    list-style: none; /* 如果是列表导航，顺便去掉默认圆点 */
  }
  

你可以按照这个顺序逐个排查，先加全局重置，再调整Header本身的样式，应该就能解决这个问题啦！

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