如何优雅消除HTML标签出现的空白区域？

你用负margin的方法属于“hack式”临时处理，根源问题其实是浏览器默认样式——多数浏览器会给html或body标签设置默认的margin或padding，这才是你看到的空白来源。负margin容易触发横向溢出，是因为强制偏移元素后，没有从根本上消除默认边距的影响。

推荐的优雅解决方法分两步：

1. 重置默认内外边距 #

直接清除html和body的默认边距，从根源去掉空白：

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

2. 全局启用border-box盒模型 #

border-box的作用是让元素的width包含自身的padding和border，避免后续添加内边距或边框时，元素宽度超出视口导致右侧溢出。给所有元素统一设置：

* {
  box-sizing: border-box;
}

如果仍担心横向溢出，可以给html加一行保险：

html {
  overflow-x: hidden;
}

这样处理后，既消除了默认空白，也不会出现右侧溢出问题，比负margin的方法更稳健、易维护。

内容的提问来源于stack exchange，提问作者José Alejandro Fernández