- Bootstrap从入门到项目实战
- 李爱玲
- 413字
- 2021-03-24 20:36:59
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 设置边距效果