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所示。

图5-19 设置边距效果