在前端开发中，CSS Reset 是一个非常常见的技术，它可以帮助我们重置浏览器的默认样式，使我们的网页更加统一、美观。然而，使用 CSS Reset 也会带来一些问题，其中之一就是 margin 的问题。在本文中，我们将会介绍一些解决这个问题的技巧。
CSS Reset 是什么？
CSS Reset 是一种技术，它可以帮助我们将浏览器的默认样式重置为一致的样式。这样做的好处是，我们可以更加方便地开发网页，而不用担心浏览器的默认样式会影响我们的设计。
目前，有很多种 CSS Reset 的方法，其中比较流行的有 Eric Meyer's Reset CSS 和 Normalize.css。这两种方法都是通过重置浏览器的默认样式来达到统一的效果。
CSS Reset 带来的 margin 问题
虽然使用 CSS Reset 可以使我们的网页更加统一，但是它也会带来一些问题，其中之一就是 margin 的问题。
在浏览器的默认样式中，不同的标签会有不同的 margin 值。比如说，p 标签的 margin-top 和 margin-bottom 默认值是 1em，而 h1 标签的 margin-top 和 margin-bottom 默认值是 0.67em。
当我们使用 CSS Reset 重置了浏览器的默认样式之后，这些 margin 值就会被清除，从而导致网页的排版出现问题。
解决 margin 问题的技巧
解决 margin 问题的技巧有很多种，下面我们将介绍其中比较常见的几种方法。
1. 使用 margin 样式
最简单的方法是在 CSS 中直接为每个标签设置 margin 样式。比如说，我们可以为 p 标签设置 margin-top 和 margin-bottom：
p {
margin-top: 1em;
margin-bottom: 1em;
}这样做的好处是，我们可以控制每个标签的 margin 值，从而达到我们想要的排版效果。但是这种方法比较麻烦，需要为每个标签都设置 margin 样式。
2. 使用全局样式
另一种方法是使用全局样式，为所有标签设置相同的 margin 值。比如说，我们可以为所有标签设置 margin-top 和 margin-bottom：
* {
margin-top: 1em;
margin-bottom: 1em;
}这样做的好处是，我们只需要设置一次样式，就可以为所有标签都设置相同的 margin 值。但是这种方法可能会影响到我们的设计，比如说在某些情况下我们可能希望某些标签的 margin 值不同。
3. 使用 clearfix
另一种解决 margin 问题的方法是使用 clearfix。clearfix 是一种技术，它可以清除浮动元素对父元素的影响，从而避免 margin 的问题。
.clearfix::after {
content: "";
display: block;
clear: both;
}我们可以为所有需要清除浮动的元素添加 clearfix 类：
<div class="clearfix"> <div class="float-left"></div> <div class="float-right"></div> </div>
这样做的好处是，我们可以避免浮动元素对父元素的影响，从而避免 margin 的问题。但是这种方法需要添加额外的样式，比较繁琐。
总结
在本文中，我们介绍了 CSS Reset 带来的 margin 问题，并介绍了一些解决这个问题的技巧。这些技巧包括使用 margin 样式、使用全局样式和使用 clearfix。不同的技巧适用于不同的情况，我们需要根据实际情况选择合适的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6603ae79d10417a2220292cb