去除 CSS Reset 中的 margin 和 padding 效果的方法
在前端开发中，我们经常会使用 CSS Reset 去除浏览器默认的样式，以确保我们的页面具有一致性和美观性。然而，有时候 CSS Reset 会把一些我们不希望去除的样式也一并清除了，比如 margin 和 padding。本文将介绍如何去除 CSS Reset 中的 margin 和 padding 效果的方法。
CSS Reset 是什么？
CSS Reset 是一个预设的 CSS 样式表，旨在去除浏览器默认的样式，以确保 HTML 元素的样式一致。CSS Reset 的目的是提供一个干净的、透明的样板，从而避免浏览器之间的样式差异。
常见的 CSS Reset 样式表有 Normalize.css、Reset.css 等。
CSS Reset 对 margin 和 padding 的影响
在 CSS Reset 中，我们经常会看到下面这些代码：
-- -------------------- ---- -------
-----
----
---
---
---
---
---
---
---
---
---
---
---
---
----
-----
---------
------
---------
--
-----------
---
-- -
------- --
-------- --
-这段代码的作用是去除上述标签的 margin 和 padding 样式。这样可以确保这些元素的样式一致，但也可能会影响我们期望保留的样式。
比如，我们在开发某个页面时需要给一个 div 元素添加 margin 样式，但是由于 CSS Reset 的影响，我们添加的样式被清除了。
如何去除 CSS Reset 中的 margin 和 padding 效果
当我们需要去除 CSS Reset 中的 margin 和 padding 效果时，常见的解决方法是使用特定的类来定义元素的样式。比如：
/* 去除 .content 的 margin 和 padding 样式 */
.content {
margin: 0!important;
padding: 0!important;
}在 HTML 中，我们可以这样使用：
<div class="content">
<!-- 这里是 .content 的内容 -->
</div>这样就可以保留我们期望的 margin 和 padding 样式了。
使用 normalize.css 时的注意事项
如果我们使用的是 Normalize.css，它的 CSS Reset 有些不同。它的 margin 和 padding 样式是这样的：
* {
margin: 0;
padding: 0;
}这样的样式会去除所有元素的 margin 和 padding 样式，包括 img、input 等元素的内边距和外边距。如果我们需要保留某些元素的 margin 和 padding 样式，我们需要在这些元素中再次定义 margin 和 padding 样式。
另外，Normalize.css 还有一个 normalize.css/legacy.css 文件，它的 margin 和 padding 样式是和传统的 CSS Reset 相同的。如果我们需要使用传统的 CSS Reset，可以在 HTML 中添加以下标签：
<link rel="stylesheet" type="text/css" href="normalize.css/legacy.css">
总结
去除 CSS Reset 中的 margin 和 padding 效果的方法很简单，只需要使用特定的类来定义元素的样式即可。在使用 Normalize.css 时，需要注意其 margin 和 padding 样式的影响，以及如何保留某些元素的 margin 和 padding 样式。在开发过程中，我们需要根据具体情况选择合适的 CSS Reset，并在需要时适当地修改样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646abf97968c7c53b0a3cf71