间距margin、padding - bootStrap4常用CSS笔记

【margin、padding】 分别采用m与p的简写方式

margin间距样式：

.m-{0 | 1 | 2 | 3 | 4 | auto}	定义四周间距 .m-0 等价于{margin:0 !important} .m-1 等价于{margin:0.25rem !important} .m-2 等价于{margin:0.5rem !important} .m-3 等价于{margin:1rem !important} .m-4 等价于{margin:1.5rem !important} .m-auto 等价于{margin:auto !important}
.mt-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-top设置
.mr-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-right设置
.mb-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-bottom设置
.ml-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-left设置
.mx-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-left与margin-right同时设置
.my-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-top与margin-bottom同时设置

 

padding间距样式：

.p-{0 | 1 | 2 | 3 | 4 | auto}	定义四周间距 .p-0 等价于{padding:0 !important} .p-1 等价于{padding:0.25rem !important} .p-2 等价于{padding:0.5rem !important} .p-3 等价于{padding:1rem !important} .p-4 等价于{padding:1.5rem !important} .p-auto 等价于{padding!important}
.pt-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-top设置
.pr-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-right设置
.pb-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-bottom设置
.pl-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-left设置
.px-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-left与padding-right同时设置
.py-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-top与padding-bottom同时设置