Bootstrap 是一款流行的前端框架，提供了众多常用的 CSS 类来简化页面设计。其中，边距（margin 和 padding）是常见的样式之一，本文将介绍 Bootstrap v4 中的各种边距类及其用法。
## 基础边距
Bootstrap 提供了一系列基础边距类，如.m-*（margin）、.p-*（padding），其中的 * 表示边距值，可以是 0、1、2、3、4 或 5。例如，.m-3 表示设置 margin 为 3 个间距单位（1 个间距单位为 16 像素）。以下是基础边距类的示例：
<div class="m-3">这是一个带有 48px 边距的 div 元素</div>除了.m-*和.p-*，还有.my-*和.py-*分别表示设置上下边距或内边距。例如，.py-2 表示同时设置 padding-top 和 padding-bottom 为 32px（即 2 个间距单位）。
## 方向边距
除了基础边距外，Bootstrap 还提供了针对每个方向的边距类。例如，.mt-* 和 .mb-* 分别表示 margin-top 和 margin-bottom。这些类可以与基础边距类组合使用，以实现更精细的样式控制。以下是一些示例：
<div class="mt-2 mb-3">这是一个带有 32px 上边距和 48px 下边距的 div 元素</div>## 左右边距
Bootstrap 提供了.mx-*和.px-*类，分别表示设置左右 margin 或 padding。同样地，它们也可以和其他的边距类组合使用。例如，.px-3 表示设置 padding-left 和 padding-right 为 48px（即 3 个间距单位）。
## 自动边距
最后，Bootstrap 还提供了自动边距类，如.m-auto、.mx-auto，它们可以用于居中对齐元素。例如，以下代码会将一个按钮居中对齐，并在其左右两侧各添加 24px 的 margin：
<button class="btn btn-primary mx-auto">按钮</button>## 总结
在 Bootstrap 4 中，外边距（margin）的样式类为 m-* 或 mx-*、my-*、mt-*、mb-*、ml-*、mr-* 其中之一，其中 * 代表数字，用于指定外边距的大小。
具体解释如下：
m-*：设置四个方向的外边距。例如，m-3表示将所有方向的外边距设置为大小为3的间距。mx-*和my-*：分别设置水平和垂直方向的外边距。例如，mx-5表示将左右两侧的外边距设置为大小为5的间距。mt-*、mb-*、ml-*和mr-*：分别设置顶部、底部、左侧和右侧的外边距。例如，mt-2表示将顶部的外边距设置为大小为2的间距。
可以通过在相应的样式类中添加数字来调整外边距的大小。注意，数字越大，外边距越宽。
另外，在以上的样式类后面加上 -auto 可以自动设置外边距。例如，mx-auto 可以使元素在水平方向上居中对齐。
以上是 Bootstrap v4 中常见的边距类。通过简单地组合这些类，我们可以轻松地实现各种页面布局效果。在应用时，建议根据需要选择相应的类，以避免过多的样式冗余。
