CSS Reset 的问题：img 自适应与 margin/line-height 的变化

CSS Reset 是前端开发中常用的一种技巧，它的作用是将不同浏览器的默认样式进行重置，使得页面在不同浏览器中呈现一致的效果。但是，在实际使用中，我们可能会遇到一些问题，比如 img 标签的自适应和 margin/line-height 的变化。本文将对这些问题进行详细讲解，并提供相应的解决方案和示例代码。

img 标签的自适应问题

在 CSS Reset 中，通常会将 img 标签的 max-width 设置为 100%，这是为了让图片在不同浏览器中自适应。但是，这种设置可能会导致图片在垂直方向上出现一些问题，比如图片底部会出现一些空白。这是因为 img 标签是行内元素，它的底部会留出一定的空白，这样才能让下一行文字不与图片重叠。

解决这个问题的方法是将 img 标签的 display 属性设置为 block，这样它就变成了块级元素，底部的空白也就消失了。

img {
  display: block;
  max-width: 100%;
  height: auto;
}

这里还需要注意的是，为了保持图片的宽高比，我们需要将 height 设置为 auto。

margin/line-height 的变化问题

在 CSS Reset 中，通常会将 margin 和 padding 的值设置为 0，这是为了消除不同浏览器之间的差异。但是，这种设置可能会导致一些元素的布局出现问题，比如在一些情况下，margin 和 line-height 的值会发生变化。

解决这个问题的方法是在 CSS Reset 中不对 margin 和 padding 进行完全的清零，而是只对一些常见的元素进行清零，比如 body、ul、ol、li、h1、h2、h3、h4、h5、h6、p 等。

body, ul, ol, li, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

这样做的好处是可以保留一些元素的默认样式，避免出现一些意想不到的问题。

总结

CSS Reset 是前端开发中常用的一种技巧，它可以消除不同浏览器之间的差异，使得页面在不同浏览器中呈现一致的效果。但是，在实际使用中，我们需要注意一些细节，比如 img 标签的自适应和 margin/line-height 的变化问题。通过本文的讲解，相信大家已经掌握了解决这些问题的方法。在实际开发中，我们可以根据具体情况进行选择，避免出现一些不必要的麻烦。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6604c64ad10417a222216b98