🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS模板：外边距与内边距调整类

📝 用途说明

当你想要调整 HTML 元素的上下间距时，可以使用这个模板中预先定义的工具类，简单快捷、可复用性强。

📘 说明

.mt-10 表示 margin-top: 10px，.mb-20 表示 margin-bottom: 20px。同样，.pt-10 和 .pb-20 分别用于上内边距和下内边距。

✅ 演示

这个盒子有 10px 上边距 和 20px 下边距
这个盒子内部有 10px 上内边距 和 20px 下内边距

📄 部分代码

<style>
.mt-10 { margin-top: 10px; }
.mb-20 { margin-bottom: 20px; }
.pt-10 { padding-top: 10px; }
.pb-20 { padding-bottom: 20px; }
.box {
  background: #f2f2f2;
  padding: 1rem;
  border: 1px solid #ccc;
}
</style>

<div class="box mt-10 mb-20">带有外边距</div>
<div class="box pt-10 pb-20">带有内边距</div>

📦 完整 HTML

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>外边距与内边距调整类</title>
  <style>
    .mt-10 { margin-top: 10px; }
    .mb-20 { margin-bottom: 20px; }
    .pt-10 { padding-top: 10px; }
    .pb-20 { padding-bottom: 20px; }
    .box {
      background: #f2f2f2;
      padding: 1rem;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="box mt-10 mb-20">这个盒子有 10px 上边距 和 20px 下边距</div>
  <div class="box pt-10 pb-20">这个盒子内部有 10px 上内边距 和 20px 下内边距</div>
</body>
</html>
已复制！

📐 工具类的系统化使用方法

用于 margin 和 padding 的工具类在提升 CSS 设计效率方面发挥着重要作用。通过统一的命名规则定义类，可以实现整个项目统一的间距规范。

📏 规范的类命名建议

将类名规范为 {property}{direction}-{size} 的格式更易理解。例如，.mt-16 表示“margin-top: 16px”，.px-24 表示“padding-left 和 padding-right: 24px”。使用 4px 或 8px 的倍数（4, 8, 12, 16, 20, 24, ...）有助于保持设计的一致性。

🛠️ 实用扩展示例

添加如 .mx-auto（margin-left/right: auto）实现水平居中，或 .m-16（margin: 16px）实现全方位边距的类非常实用。响应式设计中，可定义带断点前缀的类，如 .md:mt-20。还可根据需求添加 rem 单位（.mt-2rem）或百分比单位（.w-50%）的变体。

⚖️ 合理使用平衡

工具类虽方便，但应结合基于组件的 CSS 设计使用。在单个组件中定义详细样式，仅在布局调整和细节微调时使用工具类，能保持代码的可维护性。同时，应尽量避免使用 !important，合理管理 CSS 的特异性。

掌握这些技巧后，可以在保持整体设计系统一致性的同时，实现灵活的布局调整。但应根据项目规模和团队习惯，设计适当粒度的类。

相关模板