如何解决 CSS 重置引入的 padding 和 margin 问题

前言

在前端开发中，我们通常使用 CSS reset 或 normalize.css 来统一页面样式，让不同浏览器或设备显示一致，进而在此基础上进行开发和设计。但是，CSS reset 在清除默认样式的同时也会引入一些新的样式，如对默认 padding 和 margin 的重置，造成代码可能会出现意想不到的问题，本篇文章将会详细探讨如何解决 CSS 重置引入的 padding 和 margin 问题。

padding 和 margin 的默认值

在 CSS 中，各个元素的默认 padding 和 margin 值都有所不同，以下是部分元素的默认值：

// www.javascriptcn.com code example
/* padding 的默认值 */
p {
  padding-top: 1em;
  padding-right: 0;
  padding-bottom: 1em;
  padding-left: 0;
}

/* margin 的默认值 */
p {
  margin-top: 1em;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 0;
}

CSS reset 的问题

在使用 CSS reset 后，需要格外注意新的 padding 和 margin 值，以下是常用的 CSS reset 代码片段：

// www.javascriptcn.com code example
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

如上所示，CSS reset 对 padding 和 margin 的重置是将其值设置为 0，当我们在实际开发过程中，如果忽略这一点，往往会造成一些意想不到的问题。

解决方案

为了解决 CSS reset 对 padding 和 margin 值的影响，可以通过以下两个方法进行：

1. 显式设置 padding 和 margin 值

当你在项目中使用 CSS reset 后，需要重新设置元素的 padding 和 margin 值，以避免其原始值带来的问题。例如：

// www.javascriptcn.com code example
html,
body {
  padding: 0;
  margin: 0;
}

p {
  margin: 0 0 10px;
  padding: 0 0 10px;
}

这种方式适用于单个元素的情况，但对于大规模项目，需要在每个元素上添加样式，效率低下且容易出现遗漏。

2. 使用 box-sizing

另一个简单有效的解决方法是使用 CSS3 中的 box-sizing 属性，可以将元素的 padding 和 border 纳入到 width 和 height 计算之内，避免了 padding 和 border 对 width 和 height 的影响。

* {
  box-sizing: border-box;
}

我们可以在项目的初始化样式中添加这段代码，并将所有元素的 box-sizing 设置为 border-box，这样就无需考虑元素的 border 和 padding 对其宽度和高度的影响，可以更容易地进行页面设计和布局。

结语

本文主要介绍了如何解决 CSS 重置引入的 padding 和 margin 问题，通过显式设置元素的 padding 和 margin 值或使用 box-sizing 属性，可以避免由 CSS reset 带来的问题。在实际开发过程中，我们需要谨慎处理样式表，理解样式表的规则与冲突，以避免不必要的麻烦。

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