CSS Reset 是前端开发中常见的一种技术，在实现网页和应用的时候，为了避免浏览器之间的差异，开发者通常会使用 CSS Reset 技术来将页面的样式归零。CSS Reset 可以使得各个浏览器对于页面的基本样式保持一致，但是在使用 CSS Reset 技术的时候，常常会发生 margin 或 padding 的变化问题，如何解决这些问题，是前端开发中重要的技术之一。
CSS Reset 常见的问题
在使用 CSS Reset 时，一些元素（比如 ul，ol，p 等）可能会发生余白或内边距变化的问题，具体表现为：
-- -------------------- ---- ------- -- - ------- -- -------- -- - -- --- --- ----- ----- -------- -- -- - ------- -- -------- ----- -展开代码
从上面的代码可以看出，在使用 CSS Reset 之前和之后，p，ul 等元素的样式出现了变化。这个问题的原因是：CSS Reset 属性中将所有元素的内边距和外边距都设置为 0，但是实际上有些元素本身就带有内边距或外边距。
解决 margin 和 padding 问题的方法
解决 margin 和 padding 问题需要考虑到 CSS Reset 技术的使用，可以将需要重置的元素的默认值设置为 0，在进行样式调整时避免出现间隙问题。具体而言，可以使用以下方法解决 margin 和 padding 问题：
1. 使用全局 reset
在 CSS 文件中设置全局性的 reset，将所有元素的 margin 和 padding 设置为 0，避免元素在 CSS Reset 的时候出现变化。同时，将一些常见的元素样式进行统一设置，如：
-- -------------------- ---- ------- -- ----- ---- -- - - ------- -- -------- -- ----------- ----------- - -- -------- -- ---- - ---------- ------ - ---- - ---------- ------- ------------ ------ ----------- ------------ ---- - --- -- - ----------- ----- - - - ---------------- ----- ------ ----- - --- - ---------- ----- -展开代码
2. 针对性重置样式
在重置样式时，不要将样式全部重置为 0，可以根据不同元素的默认样式设置对应的值。如：
-- -------------------- ---- ------- -- -- -- ------ ----- -- -- - ------------ -- ------------- -- ----------- ----- - -- -- - ------ ----- -- - - ----------- -- -------------- ---- -------- -- -展开代码
3. 添加自定义样式
在根据具体的需求设置样式时，注意避免使用默认值。可以在原有基础上添加自定义的样式。
/* 修改 a 标签默认值 */ a { text-decoration: none; color: #0070f3; }
总结
在使用 CSS Reset 时，它可能会影响原有样式，导致元素的 margin 和 padding 发生变化。为了避免这种情况，我们可以针对不同的元素使用针对性的样式进行 reset，或者就全局性的样式进行 reset，然后添加自定义的样式，使得网页的样式更加合理优美。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e5f08add4f0e0ff758da8
