[分享]css内容为什么不能撑满body

在进行网页设计时，我们经常使用CSS样式来美化网页。然而，有时候我们会遇到一个问题，就是CSS内容无法撑满整个页面，这是为什么呢？body { margin: 0; padding: 0; } 首先我...

在进行网页设计时，我们经常使用CSS样式来美化网页。然而，有时候我们会遇到一个问题，就是CSS内容无法撑满整个页面，这是为什么呢？

body {
   margin: 0;
   padding: 0;
} 

首先我们先来看一下CSS中通常会使用的样式，上面的代码表示将页面的默认外边距和内边距都设为0。这样看起来似乎已经把页面填满了，但实际上还是存在问题的。

原因在于，浏览器有一个默认样式，即html元素默认有一个外边距和内边距，这就导致我们在使用CSS设置外边距和内边距为0时，只是覆盖了body元素的默认值，而html元素的默认值并没有被改变。

因此，为了解决此问题，我们可以给html元素也设置外边距和内边距为0。

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

这样我们的CSS样式就可以撑满整个页面了。

总结起来，CSS内容不能撑满整个页面的原因在于浏览器默认给html元素设置了外边距和内边距，我们只是在覆盖body元素的默认值，导致页面不能完全填满。我们解决的方法是在CSS中给html元素也设置外边距和内边距为0。