5.5.1 边距的定义

在CSS中，通过margin（外边距）和padding（内边距）来设置元素的边距。在Bootstrap 4中，用m来表示margin，用p来表示padding。

关于设置哪一边的边距也做了定义，说明如下。

■ t：用于设置margin-top或padding-top。

■ b：用于设置margin-bottom或padding-bottom。

■ l：用于设置margin-left或padding-left。

■ r：用于设置margin-right或padding-right。

■ x：用于设置左右两边的类*-left和*-right（*代表margin或padding）。

■ y：用于设置左右两边的类*-top和*-bottom（*代表margin或padding）。

在Bootstrap 4中，margin和padding定义了6个值，说明如下。

■ *-0：设置margin或padding为0。

■ *-1：设置margin或padding为0.25rem。

■ *-2：设置margin或padding为0.5rem。

■ *-3：设置margin或padding为1rem。

■ *-4：设置margin或padding为1.5rem。

■ *-5：设置margin或padding为3rem。

此外，Bootstrap还包括一个.mx-auto类，多用于固定宽度的块级元素的水平居中。

另外，Bootstrap还定义了负的margin样式，说明如下。

■ m-n1：设置margin为-0.25rem。

■ m-n2：设置margin或padding为-0.5rem。

■ m-n3：设置margin或padding为-1rem。

■ m-n4：设置margin或padding为-1.5rem。

■ m-n5：设置margin或padding为-3rem。

在下面的示例中，为div元素设置不同的边距类。

【例5.18】设置边距示例。

在IE 11浏览器中运行结果如图5-19所示。