为什么顶部有空格 - CSS

有时候我们在网页开发过程中，可能会发现在页面顶部会有一些空白区域，这个空白区域的大小和页面内容的长度无关，这是因为 CSS 盒子模型的一些特性所导致的。

CSS 盒子模型

在进行网页开发的过程中，经常会用到 CSS 盒子模型，盒子模型指的是一个矩形的容器，包含内容、内边距、边框和外边距等部分，如下图所示：

顶部空格产生的原因

顶部空格产生的原因是因为我们在设置 HTML 的 margin 和 padding 时，同样会影响整个页面的布局，会占用页面的空间。如果没有明确地设置 HTML 元素的 margin 和 padding 属性，那么浏览器会自动为其设置一些默认值，导致页面上方产生一定的空隙。

如何去掉顶部空格

有多种方法可以去掉顶部空格，下面列举其中一些:

• 通过设置 html 和 body 元素的 margin 和 padding 属性，将它们的值都设置为 0。

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

• 通过 CSS reset（重置样式）的方式，直接将所有元素的 margin 和 padding 属性都设置为 0。

* {
  margin: 0;
  padding: 0;
}

这样就可以有效地去掉顶部空格了。

总结

了解 CSS 盒子模型，对于网页开发非常重要。顶部空格的出现是盒子模型的一种特性，我们可以通过设置 HTML 元素的 margin 和 padding 属性或者使用 CSS reset 等方式来去掉顶部空格。