在前端开发过程中，CSS Reset 是一个常见的技巧，它可以清除浏览器默认样式，避免浏览器差异性带来的问题。但有时候，我们会在使用 CSS Reset 时遇到 padding、margin 不一致的情况，这个问题可能会让我们感到困扰，本文将详细介绍该问题的原因及解决方法。
问题产生原因
在使用 CSS Reset 后，我们可能会发现在不同的元素中，padding 和 margin 的表现并不一致。这是因为在 CSS Reset 时，我们对不同元素的统一处理可能会引起 padding 和 margin 的不一致。
在比较常见的 Reset 中，会将所有元素的 margin 和 padding 统一设置为 0，但是不同元素的默认 margin 和 padding 并不相同，如下表所示：
| 元素 | 默认 margin | 默认 padding |
|---|---|---|
| div | 8px | 0 |
| p | 16px 0 | 0 |
| ul、ol | 16px 0 | 40px 0 |
| button | 自适应 | 5px 10px |
| input | 自适应 | 1px |
| textarea | 自适应 | 2px |
因此，在使用 Reset 后，可能导致不同元素的 margin 和 padding 不一致。
例如，以下代码使用了 Reset 之后，div 和 p 的 margin 和 padding 不一致：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------
-------
-- ----- --
- -
------- --
-------- --
-
-- -- --
--- -
------ ------
------- ------
----------------- -----
-
- -
----------------- -------
-
--------
-------
------
-----------
-------------
-------
-------运行效果：
从效果图中可以看出，div 和 p 的 margin 和 padding 不一致，造成了视觉差距和排版问题。
解决方法
- 针对不同的元素单独处理
我们可以把 Reset 应用到页面上的不同元素上，并根据不同元素的默认 margin 和 padding 进行单独处理，从而避免不一致的问题。
例如，我们可以针对上面的示例代码进行如下处理：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------
-------
-- ----- ----- --
- -
------- --
-------- --
-
-- ------- --
---- -
------- --
-------- --
-
--- -
------ ------
------- ------
----------------- -----
------- --- --
-------- --
-
- -
----------------- -------
------- ---- --
-------- --
-
--------
-------
------
-----------
-------------
-------
-------运行效果：
通过对 div 和 p 进行单独处理，我们成功解决了 Reset 引起的 padding、margin 不一致的问题。
- 使用流行的 CSS Reset 工具
针对不同的浏览器，有许多流行的 CSS Reset 工具，比如 normalize.css、reset.css 等，它们能够避免 padding、margin 不一致的问题，并且既适应 PC 端，也适用移动端。
在测试后，我们选择了流行的 normalize.css，并在上面示例代码的基础上引入了 normalize.css，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------
----- ---------------- -----------------------------------------------------------------
-------
-- -- --
--- -
------ ------
------- ------
----------------- -----
-
- -
----------------- -------
-
--------
-------
------
-----------
-------------
-------
-------运行效果：
通过使用 normalize.css，我们成功解决了 Reset 引起的 padding、margin 不一致的问题，并且代码变得更加简洁和易维护。
总结
在实际开发中，我们需要注意 CSS Reset 引起的 padding、margin 不一致问题，并选择适合自己的解决方法。同时，在选择 CSS Reset 工具时，也需要考虑使用范围、适用情况、引入方式等因素。我们应该尽可能地避免重复的代码，提高代码的复用性和可维护性。希望这篇文章对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497ac8d48841e98944af6c8