首页 > Web开发 > 详细

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

时间:2019-05-13 16:25:22      阅读:437      评论:0      收藏:0      [点我收藏+]

【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同时设置

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

原文:https://www.cnblogs.com/wm218/p/10857130.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!