CSS 外边距（Margin）简介

在 CSS 中，外边距（margin）常用于控制元素之间的距离，有时候我们可能会遇到一些问题，margin 属性值设置错误或者使用不当，导致元素重叠或者布局混乱。

常用代码：

/* 设置所有元素的上下外边距为 20px */
body, h1, h2, h3, p {
  margin-top: 20px;
  margin-bottom: 20px;
}
/* 设置元素的左右外边距为 5px */
.element {
  margin-left: 5px;
  margin-right: 5px;
}

优化代码：

优化代码通常是为了提高代码的可读性和可维护性，对于上述代码，我们可以使用 CSS 变量和媒体查询来实现更简洁的代码。

优化后的代码：

:root {
  --margin-top: 20px;
  --margin-bottom: 20px;
}
body, h1, h2, h3, p {
  margin: var(--margin-top) var(--margin-bottom);
}
@media (max-width: 600px) {
  body, h1, h2, h3, p {
    --margin-top: 10px;
    --margin-bottom: 10px;
  }
}

在这个优化后的代码中，我们使用了 CSS 变量 --margin-top 和 --margin-bottom 来统一管理所有元素的上下外边距，在媒体查询中，我们根据屏幕宽度调整了外边距的值，使得在小屏幕设备上也能保持良好的布局，这样的优化代码更易于维护和理解。