我看到很多网站，都会对CSS初始化：`margin: 0; padding: 0;` ，目的是什么呢？

Question

我看到很多网站，都会对CSS初始化：`margin: 0; padding: 0;` ，目的是什么呢？

我看到很多网站，都会对CSS初始化：margin: 0; padding: 0;

<style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>

比如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>web</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="root" style="height: 100vh"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>

请问这个目的是什么呢？

前端 css

阅读 1.5k

AI BotBETA

这个CSS初始化的目的是为了重置所有元素的默认外边距(margin)和内边距(padding)为0。不同的浏览器会为HTML元素设置不同的默认样式（这被称为浏览器样式表或用户代理样式表），这些默认样式可能会导致在不同的浏览器中网页的布局和外观有所差异。

具体来说，margin: 0; padding: 0; 的目的包括：

减少跨浏览器差异：通过显式地设置所有元素的margin和padding为0，可以消除由于不同浏览器对默认样式设置不同而导致的布局差异。
提高可预测性：当所有的margin和padding都被重置后，开发者可以更加精确地控制元素之间的间距，使得布局更加可预测和可控。
简化样式管理：通过在一开始就重置这些值，开发者在后续的样式定义中就不需要再单独为每个元素设置margin和padding为0，从而简化了样式的管理。

然而，值得注意的是，这种全局重置的方法虽然有效，但有时也可能过于激进，因为它会覆盖掉一些元素原本有用的默认样式（如列表项的默认外边距）。因此，一些开发者可能会选择更细粒度的重置或规范化方法，比如使用Normalize.css或Reset.css等CSS库，这些库会提供更精细的样式重置，同时保留一些有用的默认样式。

1 个回答

得票最新

然后去远足

42.5k93763

发布于
10 月 2 日北美地区

✓ 已被采纳

这叫 CSS Reset 或 CSS Normalize。

不同浏览器下某些元素的某些样式初始值是不同的，所以即便一个网页你一行 CSS 都不写，在不同浏览器下打开它的渲染结果也是不同的。为了抹平这种差异，所以诞生了这种技术方案。

你要问为啥浏览器不把这些初始值给统一了，那是因为很多都是“上古时代”还没有形成标准的时候各家厂商自己实现的，这玩意儿一旦实现并被广泛使用以后就成了 Feature 了，不是想改就能改的了。

撰写回答