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

转载于:https://www.cnblogs.com/wm218/p/10857130.html

间距margin、padding - bootStrap4常用CSS笔记相关推荐

文字排版 - bootStrap4常用CSS笔记
[文字常用标签] <h1>.<h2>.<h3>.<h4>.<h5>.<h6> 标题类标签,h1字体最大以次类推 <sm ...
导航栏(navbar) - bootStrap4常用CSS笔记
导航栏:navbar 导航栏容器可以包含以下几个常用组成: 1.品牌LOGO(.navbar-brand ) 2.导航菜单(.navbar-nav) 3.导航文本(.navbar-text) 4.折叠 ...
背景颜色 - bootStrap4常用CSS笔记
.bg-primary 重要的背景颜色 .bg-success 执行成功背景颜色 .bg-info 信息提示背景颜色 .bg-warning 警告背景颜色 .bg-danger 危险背景颜色 .bg- ...
rounded-{0 | top | right | bottom | left | circle } 边角半径设置 - bootStrap4常用CSS笔记（2019-05-16 09:38）...
.rounded 四边都带有0.25rem的半径,见下图 .rounded-0 四边都是直角,见下图: .rounded-left 左上角.左上角都带有0.25rem的半径,见下图: .rounded ...
知方可补不足～CSS中margin,padding,border-style有几种书写规范
参考文章: http://www.w3school.com.cn 在我们使用CSS时,经常看到margin:0 0,margin:0 5px,padding:0 5px 10px;而它们研究是什么含义 ...
慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...
HTML与CSS笔记
HTML与CSS笔记一.HTML: IDE快捷键: tab:补全标签 ctrl+/:快速注释常用标签: <h1.h2--h6:六级标题 <p:段落 <strong:粗体 < ...
css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
CSS笔记摘抄及理解
属性选择器下面的例子为带有 title 属性的所有元素设置样式: [title] { color:red; } 属性和值选择器下面的例子为 title="W3School" 的 ...
CSS大全_最全的常用css代码
1.字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: o ...

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

间距margin、padding - bootStrap4常用CSS笔记相关推荐

最新文章

热门文章