什么是 CSS Reset？
CSS Reset 是一种常用的前端技术，用于消除浏览器默认样式，使网页的外观更加统一和可控。它通常是一段包含一系列 CSS 属性的代码片段，可将 HTML 元素的样式设置为一致的值，以便在开发过程中更方便地编写自定义样式。
为什么 CSS Reset 会引起外边距无效问题？
CSS Reset 的作用是消除大部分默认的样式，因此，如果我们没有足够的理解，可能会在样式表中设置一些意外的属性，进而导致一些不可预见的问题。其中一个常见的问题是外边距无效。想象一下以下代码：
<button class="button">Click me!</button>
.button {
background-color: blue;
color: white;
margin: 20px;
}我们希望给按钮添加一个 20px 的外边距，然而，由于 CSS Reset 取消了默认的外边距值，我们会发现按钮的上边缘仍然与页面顶部有一段距离。这是因为默认情况下，一些元素（如按钮）会自带一个外边距，而 CSS Reset 取消了这个属性，导致我们设置的外边距无效。
如何避免 CSS Reset 引起的外边距无效问题？
为了避免这个问题，我们可以手动设置所有需要的外边距。这样做显然非常麻烦，而且还容易出现遗漏和错误。更好的解决方法是使用 Normalize.css。
Normalize.css 是一种类似于 CSS Reset 的前端技术，但它通过尽可能保留浏览器默认样式的有用部分，从而提供更好的一致性和交互性。使用 Normalize.css 可以确保我们的外边距有效，并且不需要手动设置每个元素的外边距。以下是一个示例按钮的代码，它使用了 Normalize.css：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------
----- ---------------- ---------------------
-------
------- -
----------------- -----
------ ------
------- -----
-------- ---- -----
------- -----
-------------- ----
---------- -----
------- --------
-
--------
-------
------
------- -------------------- ------------
-------
-------在这个示例中，我们包含了 Normalize.css，然后设置了按钮的样式。现在，我们可以看到按钮与页面顶部有一个 20px 的外边距，即使我们取消了按钮的默认样式。
结论
避免 CSS Reset 引起的外边距无效问题是一个重要但不容易解决的问题。我们可以手动设置所有需要的外边距，但这很容易出现遗漏和错误。更好的解决方法是使用 Normalize.css，它提供了一种更好的一致性和交互性的方式，同时避免了外边距无效的问题。为了在开发中更加方便地使用这个技术，我们可以将 Normalize.css 添加到我们的项目中，并在需要的地方引用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67039c5ad91dce0dc84bc093